标签：datagrid   easyui   表格内的编辑按钮   

（一）效果

我们在设计界面的时候，在EasyUI官网上下下来的都是这样的界面：

删除和修改按钮时放在表格上面的，当修改和删除某一行的数据的时候就会很麻烦，这个时候，我们需要这样的界面：

我们需要将操作按钮放在表格中，并实现与后台的链接。

（二）实现

首先我们如何设计这样的按钮：

<span style="font-size:18px;">        function initTable() {
            //把搜素框里的内容提交到后台对数据进行过滤。
            $('#tt').datagrid({
                url: '/OtherScores/GetAllOtherScores',
                width: "100%",
                height: 400,
                fitColumns: true,
                idField: 'ID',
                loadMsg: '正在加载用户的信息...',
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30],
                queryParams: {
                    searchName: $("#searchName").val(),
                    searchRemark: $("#searchRemark").val()
                },
                columns: [[
			{ field: 'ck', checkbox: true, align: 'left', width: 50 },
			{ field: 'StaffName', title: '考核人', width: 80 },
			{ field: 'OtherScoresAsscssProgram', title: '加分项', width: 120 },
                        { field: 'OtherScores', title: '分值', width: 120 },
                        { field: 'ID', title: 'ID', width: 120, hidden: 'true' },
                        {field: 'Operation', title: '操作', width: 120,
                         formatter: function (value, row, index) {
                                var e = '<a href="#" id="deitcls" onclick="PorEdit(' + index + ')"><img src="../../EasyuiSource/themes/icons/pencil.png" border="0"></a> ';
                                var d = '<a href="#" onclick="Delete(' + index + ')"><img src="../../EasyuiSource/themes/icons/cancel.png"></a>';
                                return e + d;
                                }  
                            }

                ]],
                toolbar: [{
                    id: 'btnDownShelf',
                    text: '添加用户',
                    iconCls: 'icon-add',
                    handler: function () {
                        showAddFrm();
                    }
                }, {
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        doDelete();
                    }
                }
            ],
                onHeaderContextMenu: function (e, field) {
                },
                onLoadSuccess: function (data) {
                    $(".delUser").unbind("click");
                    $(".delUser").bind("click", function () {
                        alert($(this).attr("uid"));
                        return false;
                    });

                    $(".editUser").unbind("click");
                    $(".editUser").bind("click", function () {
                        //alert($(this).attr("uid"));
                        doEdit($(this).attr("uid"));
                        return false;
                    });
                }
            });
        }</span>

我们可以看到源代码是：

<span style="font-size:18px;"> {field: 'Operation', title: '操作', width: 120,
 formatter: function (value, row, index) {
      var e = '<a href="#" id="deitcls" onclick="PorEdit(' + index + ')"><img src="../../EasyuiSource/themes/icons/pencil.png" border="0"></a> ';
      var d = '<a href="#" onclick="Delete(' + index + ')"><img src="../../EasyuiSource/themes/icons/cancel.png"></a>';
      return e + d;}  </span>

这段代码就是对表格中的列进行编辑的，它的格式可以变化的。

我们可以看到是formatter函数它有三个值：

value:就是该表格中的值。

index取得该行号。

row取得改行所有的数据。

我们在这里只要传该行号就行了。

那么我们就看看这里代码中看到onclick调用的是ProEdit（index）函数，我们就在script标签中写这个函数将ID值传给后台就可以了：

<span style="font-size:18px;">        function PorEdit(index) {
            var id = $('#tt').datagrid("getRows")[index].ID;    //index为行号，我们用getRows属性来得到改行中的ID值
            doEdit(id);
        }</span>

这个函数中的参数id就会是在数据库中真正要查找的ID值了，通过doEdit函数就可以直接传给后台修改该条记录了。

同样的Delete也是这样的。

（三）总结

做这个功能的时候，用了整整一天的时间，一天在思考的过程中，不快的重试和搜索相关的资料，将EasyUI的DataGrid每一个属性都研究了一遍，最后在师哥的提点下才做完的，想说：不动脑筋这活儿真干不了。真心是磨人的，一天没动地方，考验意志力呀。

EasyUI DataGrid 窗体中的修改和删除按钮

标签：datagrid   easyui   表格内的编辑按钮   

原文地址：http://blog.csdn.net/qiumuxia0921/article/details/42199747