easyUI——DataGrid自定义操作列

来源：互联网发布：后端要学javascript吗编辑：程序博客网时间：2024/05/16 16:15

项目中遇到一个问题：在easyUI的datagrid中增加一列为操作列。官网的demo中没有给出具体的解决问题的方法。解决的思路就是利用单元格的属性formatter中添加内容。

HTML

分为两个部分，前面的部分是表格代码，后面的部分是明细弹出框。

    @*datagrid表格*@    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"            url="GetUserData"              toolbar="#toolbar" pagination="true"            rownumbers="true" fitColumns="true" singleSelect="true">        <thead>            <tr>                <th field="UserId" width="50">用户ID</th>                <th field="UserName" width="50">用户名</th>                <th field="CouserName" width="50">课程名</th>                <th data-options="field:'CouserId',align:'center',width:85, formatter:operate">查看明细</th>            </tr>        </thead>    </table>        @*明细弹出框*@    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"            closed="true" buttons="#dlg-buttons">        <div class="ftitle">User Information</div>        <form id="fm" method="post" novalidate>            <div class="fitem">                <label>UserId:</label>                <input name="UserId" class="easyui-textbox" required="true">            </div>            <div class="fitem">                <label>UserName:</label>                <input name="UserName" class="easyui-textbox" required="true">            </div>            <div class="fitem">                <label>CouserId:</label>                <input name="CouserId" class="easyui-textbox">            </div>            <div class="fitem">                <label>CouserName:</label>                <input name="CouserName" class="easyui-textbox" validType="email">            </div>        </form>    </div>    <div id="dlg-buttons">        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>    </div>

formatter属性添加operate函数

operate()函数中有三个参数,value指当前单元格的值,row,当前行对象，index是选中这一行的索引。

        function operate(value, row, index) {            return '<a href="#" onclick="editUser('+index+')">查看明细</a>';        }

给具体的js editUser函数添加具体的操作

        var url;        function editUser(index) {            $('#dg').datagrid('selectRow', index);            var row = $('#dg').datagrid('getSelected');            if (row){                $('#dlg').dialog('open').dialog('setTitle','Edit User');                $('#fm').form('load',row);                url = '';            }        }

效果截图

总结

对于easyui的使用拓展，怎么能从官网给的demo中拓展新的功能，是一件非常有意思的事情。

0 0