首页 > 代码库 > EasyUI DataGrid 窗体中的修改和删除按钮

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

2024-08-10 08:37:52   219人阅读

（一）效果


我们在设计界面的时候，在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=http://www.mamicode.com/EasyuiSource/themes/icons/pencil.png" border="0"> ';>

我们可以看到源代码是：

<span style="font-size:18px;"> {field: 'Operation', title: '操作', width: 120,
 formatter: function (value, row, index) {
      var e = '<a href=http://www.mamicode.com/EasyuiSource/themes/icons/pencil.png" border="0"> ';>
这段代码就是对表格中的列进行编辑的，它的格式可以变化的。

我们可以看到是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>

这一步后，我们就可以写function doEdit函数了。

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

同样的Delete也是这样的。

（三）总结

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





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


联系
我们