【EasyUI】——可编辑的DataGrid

来源：互联网发布：linux开机自动启动jar 编辑：程序博客网时间：2024/05/01 10:42

利用EasyUI做的可编辑的DataGrid大致分为两种类型，一种是启动行编辑的，一种是启动单元格编辑。且不说启动编辑的效果如何，单启动编辑这一块它就封装的很厉害。好些功能没有办法去更改。现在项目的一个需求就是在页面上使得DataGrid可以实现这样的效果，单击选中行，双击可编辑单元格，失去焦点则保存数据。在研究了整整两天之后，大致能实现，但是差失去焦点保存数据。这篇文章就简单理解一下，可启动单元格编辑的DataGrid是如何实现的。

首先得添加EasyUI的引用：

<span style="font-family:KaiTi_GB2312;font-size:18px;">    <link href="../../Content/EasyUI/easyui.css" rel="stylesheet" type="text/css" />    <link href="../../Content/EasyUI/icon.css" rel="stylesheet" type="text/css" />    <link href="../../Content/EasyUI/demo.css" rel="stylesheet" type="text/css" />    <script src="../../Content/EasyUI/jquery-1.7.1.min.js" type="text/javascript"></script>    <script src="../../Content/EasyUI/jquery.easyui.min.js" type="text/javascript"></script></span>

其次是表格的代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">        <table id="dg" title="管理员管理查询结果" style="width: auto; height: auto"; data-options="onDblClickCell:onClickCell">  @*onDblClickCell指的是双击单元格进行编辑，如果需要单击进行编辑，就改为onClickCell*@            <thead>                <tr>                    <th data-options="field:'AdminID',width:100">管理员工号</th>                    <th data-options="field:'AdminName',width:100,editor:'text'">姓名</th>                    <th data-options="field:'AdminPWD',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">密码</th>                    <th data-options="field:'AdminLevel',width:80,align:'right',editor:'text'">权限</th>                    <th data-options="field:'IsUsed',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">是否可用</th>                </tr>            </thead>        </table></span>

最后是JS代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><script type="text/javascript" src="/easyui/datagrid-cellediting.js"></script></span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">    <script type="text/javascript">        function initTable() {            $("#dg").datagrid({                url: "Series/QueryBy",  //调用的SeriesController中的QueryBy方法                width: "100%",  //宽度适应浏览器大小                fitColumns: true,  //列宽自适应                idField: 'ID',                loadMsg: '正在加载用户信息...',                pagination: true,  //是否分页显示                singleSelect: false,  //只能选中一条数据                striped: true,   //行背景交换                pageSize: 10,    //每一页的大小                pageNumber: 1,   //当前页数                pageList: [10, 20, 30],  //每一页显示的条数                queryParams: {                    searchName: $("searchName").val()                  },                columns: [[     //这段代码是给DataGrid列赋值，field就是每一列对应的字段名，title是每一列显示的列首                    { field: 'ck', checkbox: true, align: 'left', width: 50 },                    { field: 'ID', title: '主键', width: 50, hidden: true },                    { field: 'AdminID', title: '管理员工号', width: 50 },                    { field: 'AdminPassword', title: '密码', width: 50, hidden: true, editor: 'text' },                    { field: 'AdminName', title: '姓名', width: 50, editor: 'text' },                    { field: 'AdminLevel', title: '权限', width: 50, editor: 'text' },                    { field: 'IsUsed', title: '是否使用', width: 55, editor: 'text' }                ]]            });        }        $(function () {            initTable();        });    </script></span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">    <script type="text/javascript">        $.extend($.fn.datagrid.methods, {            editCell: function (jq, param) {                return jq.each(function () {                    var opts = $(this).datagrid('options');                    var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));                    for (var i = 0; i < fields.length; i++) {                        var col = $(this).datagrid('getColumnOption', fields[i]);                        col.editor1 = col.editor;                        if (fields[i] != param.field) {                            col.editor = null;                        }                    }                    $(this).datagrid('beginEdit', param.index);                    for (var i = 0; i < fields.length; i++) {                        var col = $(this).datagrid('getColumnOption', fields[i]);                        col.editor = col.editor1;                    }                });            }        });        var editIndex = undefined;        function endEditing() {            if (editIndex == undefined) { return true }            if ($('#dg').datagrid('validateRow', editIndex)) {                $('#dg').datagrid('endEdit', editIndex);                editIndex = undefined;                return true;            } else {                return false;            }        }        function onClickCell(index, field) {            if (endEditing()) {                $('#dg').datagrid('selectRow', index)    //有这句话则编辑是该行为选中状态，没有这句话则编辑是该行不是选中状态                $('#dg').datagrid('editCell', { index: index, field: field });                editIndex = index;                $('#datagrid-cell').blur( 'editCell',alert("adafsdf"));             }        }    </script></span>

总结

EasyUI有很多方法都是内部封装的，比如editCell、selectRow等，根本看不出来它具体是如何实现的。在牛腩、Jquery中，实现可编辑的表格都是自己手写一个表格，然后对表格进行操作，即编辑单元格时，插入一个文本框，编辑结束则文本框隐藏，同时也能使用获取焦点和失去焦点的事件。而在这里，当单击或双击单元格进行编辑时，单击或双击完了，单元格就已经失去状态了。而且单元格失去焦点的事件很难把控，希望大神可以指导一二。

0 0