easyUI datagrid增删改查

最新推荐文章于 2020-11-19 15:44:44 发布
最新推荐文章于 2020-11-19 15:44:44 发布
阅读量724 收藏 1
点赞数 1
分类专栏： easuUI 文章标签： easyUI js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sinat_34170721/article/details/52400045
版权
这篇博客主要介绍了如何使用easyUI的datagrid组件进行数据的增删改查操作，包括绑定数据、配置列信息、添加编辑工具栏以及处理各种操作的方法。同时，文章还展示了如何处理分页和加载数据的逻辑，以及与后端交互进行数据保存的操作流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

$(function () {

    //绑定配件在库数据

    vareditRow = undefined;

    $("#dgMaster").datagrid({

       method: 'get',

       queryParams: queryParams,

        url:locationAddress + "/AccessoriesMaster/AccessoriesMasterList?rand="+ Math.random(),//加载的URL 

       pagination: true,//显示分页

       pageSize: 15,//分页大小

       singleSelect: true,//只允许选择单行

       pageList: [5, 10, 15, 20],//每页的个数 

        fit: false,//自动补全 

       fitColumns: true,

       checkOnSelect: true,

        selectOnCheck: true,

       onClickRow: loadSubstitute,

       iconCls: "icon-save",//图标 

       loadMsg: "正在加载，请稍等...",

       rownumbers: true,//行号

       autoRowHeight: true,//定义是否设置基于该行内容的行高度

       striped: true,//设置为 true，则把行条纹化。（即奇偶行使用不同背景色）

       columns: [[      //每个列具体内容

                   //{

                   //    field: 'op',title: '<input id=\"all\" type=\"checkbox\"style=\"display:none\" οnclick="\selectAll()\"  >',

                   //    formatter:function (value, rec, rowIndex) {

                   //        return"<input type=\"checkbox\" name=\"check\" value=\"" + rec.UserId +"\">";

                   //    },

                   //},

                   {

                        field: 'HideAdd', title: '隐藏Add', align: "center",hidden: 'true', editor: { type: 'text' }

                   },

                   {

                        field: 'HideEdit', title: '隐藏Edit', align: "center",hidden: 'true',editor: { type: 'text' }

                   },

                   {

                        field: 'PartsNo', title: '配件代码', align: "center",editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'PartsName', title: '配件名称', align:"center", editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'ASUnitPrice', title: '单价（AS站价）', align: "center",editor: { type: 'text', options: { required: true} }

                    },

                   {

                        field: 'UnitPrice', title: '成本价|成本货币', align: "center",editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'RecommendedRetailPrice', title: '建议零售价', align:"center", editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'Stock', title: '库存数量', align: "center",editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'LockedStock', title: '锁定库存', align:"center", editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'AvailableStock', title: '可用库存', align:"center", editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'Remarks', title: '备注', align: "center",editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'PurchaseSource', title: '进货来源', align:"center", editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'Classification', title: '类别', align:"center", editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'Discontinued', title: '已停产', align:"center", editor: { type: 'text', options: { required: true} }

                   },

                   {

                        field: 'Product', title: '通用产品', align: "center",editor: { type: 'text', options: { required: true} }

                   },

                    {

                         field: 'DeleteFlg', title: '削除', align:"center", formatter: deleteFlgValue, editor:{ type: 'combobox', options: { data: deleteFlgs,valueField: "value",textField: "text", panelHeight: 'auto' } }

                    },

                   {

                        field: 'id', title: '操作', align: "center",

                        formatter: function(value, row, index) {

                            //varhtml = "<a href='javascript:void(0)' οnclick=\"editMaster('"+ row.PartsNo + "','" + row.PartsName + "'," +row.ASUnitPrice + "," + row.UnitPrice + "," +row.RecommendedRetailPrice + "," + row.Stock + "," +row.LockedStock + "," + row.AvailableStock + ",'" +row.Remarks + "','" + row.Substitute + "','" +row.Classification + "','" + row.PurchaseSource + "'," +row.Discontinued + ",'" + row.Product + "'," +row.DeleteFlg + ")\">修改</a>&nbsp;&nbsp;&nbsp;";

                            varhtml = "<a href='javascript:void(0)' id='delMaster' οnclick=\"delMaster('"+ row.PartsNo + "')\">删除</a>";

                            returnhtml;

                        }

                   }

        ]],

       toolbar: [{

           text: '添加', iconCls: 'icon-add',handler: function () {

               if (editRow != undefined) {

                   $("#dgMaster").datagrid('endEdit', editRow);

               }

               if (editRow == undefined) {

                   $("#dgMaster").datagrid('insertRow', {

                        index: 0,

                        row: {}

                   });

                   $("#dgMaster").datagrid('beginEdit', 0);

                   var cellEdit = $('#dgMaster').datagrid('getEditor',{ index: 0, field: 'HideAdd' });

                   var $input = cellEdit.target; //得到文本框对象

                   $input.val("1"); //设值

                   editRow = 0;

               }

            }

        },'-', {

           text: '保存', iconCls: 'icon-save',handler: function () {

               $("#dgMaster").datagrid('endEdit', editRow);

 

               //如果调用acceptChanges(),使用getChanges()则获取不到编辑和新增的数据。

 

               //使用JSON序列化datarow对象，发送到后台。

               var rows = $("#dgMaster").datagrid('getChanges');

 

               var rowstr = JSON.stringify(rows);//把json转化为字符串

               $.ajax({

                   type: "POST",

                   url: "/AccessoriesMaster/IsAddEdit",

                   dataType: "json",

                   data: rowstr,

                   contentType: "application/json; charset=utf-8",

                   success: function (rowstr) {

                        $.messager.alert("操作提示", "操作成功！");

                   }

               });

            }

        },

        //'-',{

        //    text: '删除',iconCls: 'icon-remove', handler: function () {

        //       $("#PeijianDG").datagrid('endEdit', editRow);

        //        var row =$("#PeijianDG").datagrid('getChecked');

        //        var rowstr = JSON.stringify(row);

        //        $.each(row, function (index, item) {

        //            var num =$("#PeijianDG").datagrid('getRowIndex', item);

        //           $("#PeijianDG").datagrid('deleteRow', num);

        //        });

               

        //    }

        //},

        '-', {

           text: '修改', iconCls: 'icon-edit',handler: function () {

               var row = $("#dgMaster").datagrid('getSelected');

               if (row !=null){

                   if (editRow != undefined) {

                        $("#dgMaster").datagrid('endEdit',editRow);

                   }

 

                   if (editRow == undefined) {

                        varindex = $("#dgMaster").datagrid('getRowIndex', row);

                        $("#dgMaster").datagrid('beginEdit',index);

                        editRow = index;

                        $("#dgMaster").datagrid('unselectAll');

                        varcellEdit = $('#dgMaster').datagrid('getEditor',{ index: index, field: 'HideEdit' });

                        var$input = cellEdit.target; // 得到文本框对象

                        $input.val("2"); // 设值

                   }

               } else {

                    

               }

            }

        }

        ],

        //onAfterEdit:function (rowIndex, rowData, changes) {

        //    editRow = undefined;

        //},

        //onDblClickRow:function (rowIndex, rowData) {

        //    if (editRow != undefined) {

        //       $("#dgMaster").datagrid('endEdit', editRow);

        //    }

 

        //    if (editRow == undefined) {

        //       $("#dgMaster").datagrid('beginEdit', rowIndex);

        //        editRow = rowIndex;

        //    }

        //},

       loadFilter: function (data) {

            returndata;

        }

    });

 

    varqueryParams = $('#dgMaster').datagrid('options').queryParams;

    //设置分页控件     

 

    varp = $('#dgMaster').datagrid('getPager');

 

   $(p).pagination({

 

       beforePageText: '第',//页数文本框前显示的汉字         

 

       afterPageText: '页    共 {pages} 页',

 

        displayMsg: '当前显示 {from} - {to} 条记录  共 {total} 条记录',

    });

 

    //查询按钮

    $("#selectMaster").click(function() {

       queryParams["PartsNo"] = $('#partsNo').val();

       queryParams["PartsName"] = $("#partsName").combobox('getText');

        $('#dgMaster').datagrid('options').queryParams= queryParams;

        $('#dgMaster').datagrid("reload");

    });

 

    //添加弹窗初始关闭

    $('#addSubstituteDialog').dialog('close');

 

 

    //加载替代品

    $("#dgMasterSubstitute").datagrid({

       method: 'get',

       queryParams: queryParams,

        //url:locationAddress + "/AccessoriesMaster/selectSubstitute",//加载的URL 

       pagination: true,//显示分页

       pageSize: 15,//分页大小

       singleSelect: true,//只允许选择单行

       pageList: [5, 10, 15, 20],//每页的个数 

        fit: false,//自动补全 

       fitColumns: true,

       iconCls: "icon-save",//图标 

       loadMsg: "正在加载，请稍等...",

       rownumbers: true,//行号

       autoRowHeight: true,//定义是否设置基于该行内容的行高度

       striped: true,//设置为 true，则把行条纹化。（即奇偶行使用不同背景色）

       columns: [[      //每个列具体内容

                   {

                        field: 'PartsNo', title: '配件代码', align: "center",editor: { type: 'text' }

                   },

                   {

                        field: 'PartsName', title: '配件名称', align:"center", editor: { type: 'text' }

                   },

                   {

                        field: 'ASUnitPrice', title: '单价（AS站价）', align: "center",editor: { type: 'text' }

                   },

                   {

                        field: 'UnitPrice', title: '成本价|成本货币', align: "center",editor: { type: 'text' }

                   },

                   {

                        field: 'RecommendedRetailPrice', title: '建议零售价', align:"center", editor: { type: 'text' }

                   },

                   {

                        field: 'Stock', title: '库存数量', align: "center",editor: { type: 'text' }

                   },

                   {

                        field: 'LockedStock', title: '锁定库存', align:"center", editor: { type: 'text' }

                   },

                   {

                        field: 'AvailableStock', title: '可用库存', align:"center", editor: { type: 'text' }

                   },

                   {

                       field: 'Remarks', title: '备注', align: "center",editor: { type: 'text' }

                   },

                   {

                        field: 'PurchaseSource', title: '进货来源', align:"center", editor: { type: 'text' }

                   },

                    {

                        field: 'Classification', title: '类别', align:"center", editor: { type: 'text' }

                   },

                   {

                        field: 'Discontinued', title: '已停产', align:"center", editor: { type: 'text' }

                   },

                   {

                        field: 'Product', title: '通用产品', align: "center",editor: { type: 'text' }

                   },

                   {

                        field: 'id', title: '操作', align: "center",

                   }

        ]],

       toolbar: [{

           text: '添加', iconCls: 'icon-add',handler: function () {

               var rowInfo = $("#dgMaster").datagrid('getSelected');

               if (rowInfo != null){

                   tankuang();

 

                   $('#addSubstituteDialog').dialog({

                        title: '增加替代品信息',

                        width: 1150,

                        height: 560,

                        closed: false,

                        cache: false,

                        modal: true,

                        buttons: [{

                            text: '确认添加',

                            handler: function() {

                                varrow = $("#dgMasterSubstituteA").datagrid("getRows");

                                varrowMaster = $("#dgMaster").datagrid("getSelected");

                                for(vari = 0; i < row.length; i++) {

                                    $('#dgMasterSubstitute').datagrid('appendRow',row[i]);

                                }

                                varrowstr = JSON.stringify(row);

                                $.ajax({

                                    type: "POST",

                                    url: "/AccessoriesMaster/JsonSubstitute?Substitute="+ rowMaster.PartsNo,

                                    dataType: "json",

                                    data:rowstr,

                                   contentType: "application/json; charset=utf-8",

                                    success: function(rowstr) {

                                       $.messager.alert("操作提示", "操作成功！");

                                    }

                                });

                                $('#addSubstituteDialog').dialog('close');

                            }

                        }, {

                            text: '关闭',

                            handler: function() { $('#addSubstituteDialog').dialog('close'); }

                        }]

                   });

               }else

                   $.messager.alert("操作提示", "请选择配件Master来添加替代品!");

            }

        }],

       loadFilter: function (data) {

            returndata;

        }

    });

    varqueryParams = $('#dgMasterSubstitute').datagrid('options').queryParams;

    //设置分页控件     

 

    varp = $('#dgMasterSubstitute').datagrid('getPager');

 

   $(p).pagination({

 

       beforePageText: '第',//页数文本框前显示的汉字         

 

       afterPageText: '页    共 {pages} 页',

 

       displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',

    });

});

【easyui】之DataGrid数据增删改
yifei_345678的博客
05-11 1297
easyui最后一波！
EasyUi DataGrid增删改查(EasyUI)示例源码
07-06
源码示例前台套用easyui，利用ajax调用sql数据库对学生信息表进行增删改查 兼容ie，火狐和谷歌，删除在 删除调用一下删除的方法即可;绝对可用，提供这方面学习和开发的朋友！
Easyui datagrid的增删改
weixin_45576466的博客
06-29 342
dfa
EasyUI Datagrid增删改查
chen289251809的专栏
11-03 887
本教程重点在于如何在现有的easyui datagrid报表中增加增删改查功能，通过现有的代码直接复制粘贴即可，无需手动敲击代码，实现快速部署应用。        注意：如果需要视频操作教程，请点击**此处**下载。
easyui-datagrid 增删改查
热门推荐
fengxing_2的专栏
12-11 1万+
easyui-datagrid 增删改查  ，支持对行进行双击编辑修改， 从页面到后台的代码，绿色部分为转为为json字符串 html 页面代码       operateDataGrid.html
DataGrid增删改查(EasyUI)示例源代码
03-18
源码示例前台套用easyui，利用ajax调用sql数据库对学生信息表进行增删改查 兼容ie，火狐和谷歌，删除在 a href=# class=easyui-linkbutton id=id_cancel iconcls=icon-cancel plain=true onclick=delete_dg();...
DataGrid增删改查(EasyUI)示例
07-27
DataGrid增删改查(EasyUI)示例源码 源码描述： 源码示例前台套用easyui，利用ajax调用sql数据库对学生信息表进行增删改查 兼容ie，火狐和谷歌，删除在 <a href="#" class="easyui-linkbutton" id="id_cancel " ...
EasyUI DataGrid 增删改查源码
08-23
EasyUI DataGrid 是一款基于jQuery的前端数据展示组件，它为Web应用提供了强大的表格操作功能，包括数据的增删改查。在这个主题中，我们将深入探讨EasyUI DataGrid的源码，理解其工作原理，以及如何在实际项目中实现...
jQuery EasyUI Datagrid增删改查实例详解
在这些组件中，DataGrid是一个非常重要的功能组件，它用于展示数据的表格形式，并且能够处理数据的增删改查操作。本文将详细介绍jquery easyui datagrid demo，对其中的核心知识点进行深入解析。 ### 1. jQuery ...
Easyui DataGrid增删改查实现
漫天雪_昆仑巅
09-27 4732
Java使用Spring MVC以及Mybatis实现 DataGrid的增删改查/分页，以Mysql数据库为例，效果：   具体代码如下： 0、数据库脚本： CREATE TABLE `compy` ( `id` bigint(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `compy_id` varchar(64) NOT NUL...
DataGrid增删改查(EasyUI)示例源码
09-23
DataGrid增删改查(EasyUI)示例源码
easy ui datagrid 增删改查+分页 asp.net
04-27
数据库管理系统，不管是桌面版，还是网页版，我觉得最重要的功能是：增删改查+分页。文档里面的例子就是asp.net web form + easy ui 的datagrid。简单的演示了这五个重要功能。请用vs2010运行，数据库没有给出。
jquery easyui datagrid实现增加，修改，删除方法总结
10-22
主要介绍了jquery easyui datagrid实现增加，修改，删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下
EasyUI使用DataGrid数据表格实现增删改查
Dawn.x的博客
06-28 1241
目录前言增加、修改功能的实现步骤三级目录 前言 接前文，已经用EasyUI的DataGrid组件实现了查询数据渲染的功能，这篇博文给大家分享下增删改的实现 增加、修改功能的实现步骤 先介绍一下增加功能的实现： 利用dialog组件进行同一页面增加，这个组件和模态框一个道理，只不过EasyUI的样式不太美观，引用： 要进行动态的页面传递数据到后台，那么给前文的增加按钮绑定事件: // 给新增按钮绑定点击事件 $("#btn-add").click(function() { $("#dd").dia
使用easyUI的datagrid写一个增删改查
有时间就写写代码
11-19 293
使用easyUI的datagrid写一个增删改查 1 分页查询和datagrid的初始化 1. 1 页面布局: <table id="dg" style="width: 500px;height: 400px;text-align: center"> </table> <div id="tb"> <a id="addBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="
jquery easyui datagrid使用参考(增删改查1)
light1324的专栏
05-16 1678
xxx //文件上传 $(document).ready(function(){     var validateForm = function() {  };     var showResponse = function(data,status) {      $("#imageUrl").textbox('setValue',data.responseText);
Easyui使用DataGrid增删改查以及常见问题
胖大星的博客
07-19 1249
DataGrid数据网格 <table id="dg" title="添加其他项" class="easyui-datagrid" style="width: 90%; height: 250px" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="tr
easyui datagrid 增删改查示例
weixin_30500105的博客
07-09 143
查询JSP页面 1 <!doctype html> 2 <%@include file="/internet/common.jsp"%> 3 <!-- 新样式右侧菜单共用CSS和部分JS：在页面最前 --> 4 <%@include file="/ChangeFbrole/pageMain/Common_RightMenu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值