JQuery中自定义data-*的使用

Bertha 。 2022-09-23 11:00 189阅读 0赞

向元素附加数据，然后取回该数据：

$("#btn1").click(function(){ 
      $("div").data("greeting", "Hello World");
    });
    $("#btn2").click(function(){ 
      alert($("div").data("greeting"));
    });

上面为js代码中直接存取数据，而下面则以freemarker渲染为例展示如何通过data-\*的方式来实现存取数据：

<table id="j_sortTables" class="gui-table">
                    <thead>
                        <tr>
                            <th>建筑ID</th>
                            <th>楼层编码</th>
                            <th>楼层号</th>
                            <th>楼层名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <#if (data?exists) && (data?size gt 0) >
                            <#list data as item>
                            <tr>
                                <td>${item.build_id!''}</td>
                                <td>${item.floor_code!''}</td>
                                <td>${item.floor_no!''}</td>
                                <td>${item.floor_name!''}</td>
                                <td>
                                    <button data-toggle="modal" data-target="#j_EditRoleDialog" data-id="${item.id!''}" data-buildid="${item.build_id!''}" data-floorcode="${item.floor_code!''}" data-floorno="${item.floor_no!''}" data-floorname="${item.floor_name!''}" class="g-btn g-btn-m5d78af j_edit">编辑</button>
                                    <button data-url="/g/admin/sys/floor/delete" data-id="${item.id!''}" data-message="删除该业态可能会使部分商户产生异常状态，请谨慎操作。" class="g-btn g-btn-m5d78af j_del">删除</button>
                                </td>
                            </tr>
                            </#list>
                        <#else>
                            <td colspan="8">暂无数据</td>
                        </#if>
                    </tbody>
            </table>

上例为一个table，每一行有一个编辑按钮，点击后弹出对话框重新修改数据，而之前的数据则为默认数据填入对话框中的输入框中。  
标签中 data-floorcode=”$\{item.floor\_code!”\}“引号中内容为freemarker渲染器的标签，渲染时把该条目的floor\_code数据置换到标签位置，由此该数据和这个编辑按钮绑定在一起。

上面为弹窗代码。

$editBuildId = $('#j_editBulidId'),
            $editFloorName = $('#j_editFloorName'),
            $editFloorNo = $('#j_editFloorNo'),
            $editFloorCode = $('#j_editFloorCode'),
            $editId = $('#edit_floor_id');
     $('.j_edit').on('click',function(){
                var $this = $(this),
                    buildId = $this.data('buildid'),
                    floorName = $this.data('floorname'),
                    floorNo = $this.data('floorno'),
                    floorCode = $this.data('floorcode'),
                    id = $this.data('id');
                $editFloorCode.val(floorCode);
                $editFloorName.val(floorName);
                $editFloorNo.val(floorNo);
                $editBuildId.val(buildId);
                $editId.val(id);
            });

通过上面js完成data字段的值获取然后填入弹出框的输入框中。

需要注意的是data-floorno 横线后面不能出现大写字母 如果为data-floorNo 则无法获取到相应标签和值