JQuery中自定义data-*的使用

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

$("#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数据置换到标签位置，由此该数据和这个编辑按钮绑定在一起。

<div class="modal fade" id="j_EditRoleDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="myModalLabel">编辑楼层</h4>
                    </div>
                    <div class="modal-body">
                        <form id="j_EditForm" action="/g/admin/sys/floor/edit" method="post" novalidate="novalidate">
                            <ul>
                                <li class="g-inputcon g-dottodbobor">
                                    <span class="g-inputname"><i>*</i>建筑编码</span>
                                    <div>
                                        <input id="j_editBulidId" name="buildId" required="" placeholder="1-10字符" maxlength="10" title="请填写建筑编码" class="g-input g-large-input g-verity-input" type="text" aria-required="true">
                                    </div>
                                    <p data-tips="" class="g-errmsg"></p>
                                </li>
                                <li class="g-inputcon g-dottodbobor">
                                    <span class="g-inputname"><i>*</i>楼层编码</span>
                                    <div>
                                        <input id="j_editFloorCode" name="floorCode" required="" placeholder="1-10字符" maxlength="10" title="请填写楼层编码" class="g-input g-large-input g-verity-input" type="text" aria-required="true">
                                    </div>
                                    <p data-tips="" class="g-errmsg"></p>
                                </li>
                                <li class="g-inputcon g-dottodbobor">
                                    <span class="g-inputname"><i>*</i>楼层号</span>
                                    <div>
                                        <input id="j_editFloorNo" name="floorNo" required="" placeholder="1-10字符" maxlength="10" title="请填写楼层号" class="g-input g-large-input g-verity-input" type="text" aria-required="true">
                                    </div>
                                    <p data-tips="" class="g-errmsg"></p>
                                </li>
                                <li class="g-inputcon g-dottodbobor">
                                    <span class="g-inputname"><i>*</i>楼层名称</span>
                                    <div>
                                        <input id="j_editFloorName" name="floorName" required="" placeholder="1-10字符" maxlength="30" title="请填写楼层名称" class="g-input g-large-input g-verity-input" type="text" aria-required="true">
                                    </div>
                                    <p data-tips="" class="g-errmsg"></p>
                                </li>

                                <li class="g-inputcon">
                                <input id="edit_floor_id" name="id" type="hidden" class="g-input g-large-input g-verity-input" value="">
                                    <input class="g-btn g-btn-m5d78af" type="submit" value="确定">
                                    <input data-dismiss="modal" aria-label="Close" class="g-btn g-btn-mdadada" type="reset" value="取消">
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
    </div>

上面为弹窗代码。

$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 则无法获取到相应标签和值