EasyUI之dataGrid的行内编辑

  1 $(function () {
  2         var datagrid; //定义全局变量datagrid
  3         var editRow = undefined; //定义全局变量:当前编辑的行
  4         datagrid = TskupluAddPacket.datagrid({
  5                 url: ThinkPHP[‘MODULE‘] + ‘/Tskuplu/getPacketList‘, //请求的数据源
  6                 iconCls: ‘icon-save‘, //图标
  7                 pagination: true, //显示分页
  8                 pageSize: 15, //页大小
  9                 pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
 10                 fit: true, //datagrid自适应宽度
 11                 fitColumn: false, //列自适应宽度
 12                 striped: true, //行背景交换
 13                 nowap: true, //列内容多时自动折至第二行
 14                 border: false,
 15                 idField: ‘packetid‘, //主键
 16                 sortName : ‘packetid‘,                                                                    //排序字段
 17                 sortOrder : ‘desc‘,                                    //排序方式
 18                 columns: [[//显示的列
 19                         {field: ‘packetid‘, title: ‘ID‘, width: 100, sortable: true, checkbox: true },
 20                         { field: ‘packunit‘, title: ‘包装单位‘, width: 100, sortable: true,
 21                                 editor: { type: ‘validatebox‘, options: { required: true} }
 22                         },
 23                         { field: ‘packqty‘, title: ‘包装细数‘, width: 100,
 24                                 editor: { type: ‘validatebox‘, options: { required: true} }
 25                         },
 26                         { field: ‘packspec‘, title: ‘包装规格‘, width: 100,
 27                                 editor: { type: ‘validatebox‘, options: { required: true} }
 28                         }
 29                 ]],
 30                 queryParams: {
 31                     pluid: $(‘#addpluid‘).val()
 32                 }, //查询参数
 33                 toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function () {//添加列表的操作按钮添加,修改,删除等
 34                         //添加时如果没有正在编辑的行,则在datagrid的第一行插入一行
 35                         if (editRow == undefined) {
 36                                 datagrid.datagrid("insertRow", {
 37                                         index: 0, // index start with 0
 38                                         row: {}
 39                                 });
 40                                 //将新插入的那一行开户编辑状态
 41                                 datagrid.datagrid("beginEdit", 0);
 42                                 //给当前编辑的行赋值
 43                                 editRow = 0;
 44                         }
 45
 46                 }
 47                 }, ‘-‘,
 48                 { text: ‘删除‘, iconCls: ‘icon-remove‘,
 49                     handler: function () {
 50                          //删除时先获取选择行
 51                          var rows = datagrid.datagrid("getSelections");
 52                          //选择要删除的行
 53                          if (rows.length > 0) {
 54                                 $.messager.confirm("提示", "你确定要删除吗?", function (r) {
 55                                     if (r) {
 56                                         var ids = [];
 57                                         for (var i = 0; i < rows.length; i++) {
 58                                             ids.push(rows[i].packetid);
 59                                         }
 60                                         //将选择到的行存入数组并用,分隔转换成字符串,
 61                                         //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
 62                                         //alert(ids.join(‘,‘));
 63                                         $.ajax({
 64                                             url : ThinkPHP[‘MODULE‘] + ‘/Tskuplu/deletePacket‘,
 65                                             type : ‘POST‘,
 66                                             data : {
 67                                                 ids : ids.join(‘,‘)
 68                                             },
 69                                             beforeSend : function (){
 70                                                 $.messager.progress({
 71                                                     text : ‘正在处理中...‘
 72                                                 });
 73                                             },
 74                                             success : function (data){
 75                                                 $.messager.progress(‘close‘);
 76                                                 if (data >0){
 77                                                     datagrid.datagrid(‘reload‘);
 78                                                     $.messager.show({
 79                                                         title : ‘操作提醒‘,
 80                                                         msg   : data + ‘条数据被成功删除!‘
 81                                                     })
 82                                                 } else if( data == -999 ) {
 83                                                     $.messager.alert(‘删除失败‘, ‘对不起,您没有权限!‘, ‘warning‘);
 84                                                 } else {
 85                                                     $.messager.alert(‘删除失败‘, ‘没有删除任何数据!‘, ‘warning‘);
 86                                                 }
 87                                             }
 88                                         });
 89                                     }
 90                                 });
 91                          } else {
 92                                 $.messager.alert("提示", "请选择要删除的行", "error");
 93                          }
 94                     }
 95                 }, ‘-‘,
 96                 { text: ‘修改‘, iconCls: ‘icon-edit‘,
 97                     handler: function () {
 98                         //修改时要获取选择到的行
 99                         var rows = datagrid.datagrid("getSelections");
100                         //如果只选择了一行则可以进行修改,否则不操作
101                         if (rows.length == 1) {
102                             //当无编辑行时
103                             if (editRow == undefined) {
104                                 //获取到当前选择行的下标
105                                 var index = datagrid.datagrid("getRowIndex", rows[0]);
106                                 //开启编辑
107                                 datagrid.datagrid("beginEdit", index);
108                                 //把当前开启编辑的行赋值给全局变量editRow
109                                 editRow = index;
110                                 //当开启了当前选择行的编辑状态之后,
111                                 //应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑
112                                 datagrid.datagrid("unselectAll");
113                             }
114                         }
115                     }
116                 }, ‘-‘,
117                 { text: ‘保存‘, iconCls: ‘icon-save‘,
118                     handler: function () {
119                          //保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
120                          datagrid.datagrid("endEdit", editRow);
121                          editRow = undefined;
122                     }
123                 }, ‘-‘,
124                 { text: ‘取消编辑‘, iconCls: ‘icon-redo‘,
125                     handler: function () {
126                          //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
127                          editRow = undefined;
128                          datagrid.datagrid("rejectChanges");
129                          datagrid.datagrid("unselectAll");
130                     }
131                 }, ‘-‘],
132                 onAfterEdit: function (rowIndex, rowData, changes) {
133                     //endEdit该方法触发此事件
134                     //var row = datagrid.datagrid("getData").rows[rowIndex];  //获取某一行的值
135                     var inserted = datagrid.datagrid(‘getChanges‘,‘inserted‘);
136                     var updated  = datagrid.datagrid(‘getChanges‘,‘updated‘);
137                     if(inserted.length < 1 && updated.length <1){
138                         editRow = undefined;
139                         datagrid.datagrid(‘unselectAll‘);
140                         return;
141                     }
142                     var url = ‘‘;
143                     if(inserted.length>0){
144                         url=ThinkPHP[‘MODULE‘] + ‘/Tskuplu/addPacket‘;
145                     }
146                     if(updated.length>0){
147                         url=ThinkPHP[‘MODULE‘] + ‘/Tskuplu/updatePacket‘;
148                     }
149
150                     $.ajax({
151                        url : url,
152                        type : ‘POST‘,
153                        data : {
154                            ‘pluid‘: $(‘#addpluid‘).val(),
155                            ‘packetid‘:rowData.packetid,
156                            ‘packunit‘:rowData.packunit,
157                            ‘packqty‘ :rowData.packqty,
158                            ‘packspec‘:rowData.packspec
159                        },
160                        beforeSend : function (){
161                            $.messager.progress({
162                                text : ‘正在处理中...‘
163                            })
164                        },
165                        success : function (data){
166                            $.messager.progress(‘close‘);
167                            if (data > 0){
168                                 datagrid.datagrid("acceptChanges");
169                                 $.messager.show({
170                                     title : ‘操作提示‘,
171                                     msg : ‘添加成功‘
172                                 });
173                                 editRow = undefined;
174                                 datagrid.datagrid("reload");
175                                $(‘#addcheck‘).val(1);
176                            } else if (data == -999) {
177                                $.messager.alert(‘添加失败‘, ‘抱歉!您没有权限!‘, ‘warning‘);
178                            } else {
179                                datagrid.datagrid("beginEdit",editRow);
180                                $.messager.alert(‘警告操作‘, ‘未知错误!请重新刷新后提交!‘, ‘warning‘);
181                            }
182                            datagrid.datagrid("unselectAll");
183                        }
184                     });
185                     //////////////////
186                 },
187                 onDblClickRow: function (rowIndex, rowData) {
188                 //双击开启编辑行
189                     if (editRow == undefined) {
190                             datagrid.datagrid("beginEdit", rowIndex);
191                             editRow = rowIndex;
192                     }
193                 }
194         });
195     });

原文地址:https://www.cnblogs.com/luxd/p/9952135.html

时间: 2024-11-01 03:00:42

EasyUI之dataGrid的行内编辑的相关文章

Datagrid的行内编辑,Combobox的级联。

选择一个省份,市区的信息会发生相应的变化.主要是第一个combobox的值发生变化的时候,访问服务器,获得数据并赋值给第二个combobox,获取数据就是一个ajax时间,在第一个combobox中获得第二个combobox对象: .$.get(ctx+'region/ajaxRegionList.html',{parentid:newValue},function(data){ var ed=$("#"+frm+"#addresstest").datagrid('

EasyUI-Datagrid行内编辑

接上一篇,这次介绍easyUI的datagrid的行内编辑单元格的功能. 关于行内编辑,我之前写过一个demo <jQuery:页面可编辑表格>,但是easyui 中早已经封装了行内单元格编辑的功能,我们在调用时只需要使用人家封装好的方法就行.这里就使用封装好的方法. 实现思路: 1.定义table 时写上监听单击事件的方法:onClickCell:onClickCell: 2.将需要编辑的<th>和<td>设置编辑的触发响应:editor:'text'.其中text只

ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 #是否,已经可以看到效果了. 对于分类ID列,通常显示的是分类名称,而不是ID值. 可是分类名称不在文章表里,在文章分类表,怎么关联格式化呢? 我们有文章分类表: 所以我们写个下拉配置: 然后在配置表头里把它配置上: 效果: PS:通过自定义语句来翻译下拉项的注意事项: 1:翻译项的数量在100以下,

Easy UI实现行内编辑

最近跟着勇霞师姐做我们高校云平台的UI系统,各个系统界面的管理.UI的系统虽然很小,但是技术内容很新鲜,这篇博文就像大家介绍一下我新接触的EasyUI的知识:开启行内编辑. 效果图如下: 一.View页面 首先,引入easyui的js文件. [html] view plaincopy <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/theme

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5821192.html 一.x-editable组件介绍 x

[转]Laravel与bootstrap-editable实现table的行内编辑

[转]Laravel与bootstrap-editable实现table的行内编辑 准备需要的库 bootstrap3.0下载 bootstrap-table下载 x-editable-develop下载 前端处理 引入库 要使用插件,首先要在blade模板(或者说html)里引入对应的js文件和css文件 bootstrap引入 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

雷林鹏分享:jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

当切换数据网格视图(datagrid view)到 'detailview',用户可以展开一行来显示一些行的明细在行下面.这个功能允许您为防止在明细行面板(panel)中的编辑表单(form)提供一些合适的布局(layout).在本教程中,我们使用数据网格(datagrid)组件来减小编辑表单(form)所占据空间. 步骤 1:在 HTML 标签中定义数据网格(DataGrid) url="get_users.php" toolbar="#toolbar" fitC

给Jquery easyui 的datagrid 每行增加操作链接

我们都知道Jquery的Easy-UI的datagrid可以添加并且自定义Toolbar,这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作.但实际项目里我们可能需要在每行后面加一些操作链接,最常见的就是比如"修改"."删除"."查看"之类.如下图: 凡事都怕但是!Easy-UI的Datagrid没有直接添加link的属性.查看Easy-UI的帮助文档,看到一个formater:格式化函数,可以对某一行进行格式化,然后通过

easyUI的datagrid每行数据添加操作按钮的方法

今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下: 其实要加一行自定义列很简单,在js声明datagrid的时候加上如下代码 [javascript] view plain copy {field:'operate',title:'操作',align:'center',width:$(this).width()*0.1, formatter:function(