EasyUI DataGrid 可编辑列级联操作

简介: EasyUI DataGrid 可编辑列级联操作
 $(function () {
             var lastIndex;
             var $dg = $('#dg');
             $dg.datagrid({
                 width : 600,
                 height : 'auto',
                 title : '可编辑列级联操作',
                 singleSelect : true,
                 idField : 'itemid',
                 url : '/uploads/rs/233/bkf2ntm7/datagrid_data2.json',
                 columns : [[{
                             field : 'itemid',
                             title : 'Item ID',
                             width : 80
                         }, {
                             field : 'productid',
                             title : 'Product ID',
                             width : 120,
                             formatter : productFormatter,
                             editor : {
                                 type : 'combobox',
                                 options : {
                                     valueField : 'productid',
                                     textField : 'name',
                                     data : products,
                                     required : true,
                                     onChange : function (newValue, oldValue) {
                                 //重点在此处
                                 //先获取到当前选中行
                                 //根据当前行获取,当前行的下标
                                 //在根据下标和要获取列的filed获取对应filed的Editor对象
                                 //然后在根据对应的Editor操作
                                         var row = $dg.datagrid('getSelected');
                                         var rindex = $dg.datagrid('getRowIndex', row);
                                         var ed = $dg.datagrid('getEditor', {
                                                 index : rindex,
                                                 field : 'listprice'
                                             });
                                         $(ed.target).numberbox('setValue', '2012');
                                     }
                                 }
                             }
                         }, {
                             field : 'listprice',
                             title : 'List Price',
                             width : 80,
                             align : 'right',
                             editor : {
                                 type : 'numberbox',
                                 options : {
                                     precision : 1
                                 }
                             }
                         }, {
                             field : 'unitcost',
                             title : 'Unit Cost',
                             width : 80,
                             align : 'right',
                             editor : 'numberbox'
                         }, {
                             field : 'attr1',
                             title : 'Attribute',
                             width : 250,
                             editor : 'text'
                         }, {
                             field : 'status',
                             title : 'Status',
                             width : 60,
                             align : 'center',
                             editor : {
                                 type : 'checkbox',
                                 options : {
                                     on : 'P',
                                     off : ''
                                 }
                             }
                         }
                     ]],
                 onBeforeLoad : function () {
                     $(this).datagrid('rejectChanges');
                 },
                 onClickRow : function (rowIndex) {
                     if (lastIndex != rowIndex) {
                         $dg.datagrid('endEdit', lastIndex);
                         $dg.datagrid('beginEdit', rowIndex);
                     }
                     lastIndex = rowIndex;
                 }
             });
         });
         var products = [{
                 productid : 'FI-SW-01',
                 name : 'Koi'
             }, {
                 productid : 'K9-DL-01',
                 name : 'Dalmation'
             }, {
                 productid : 'RP-SN-01',
                 name : 'Rattlesnake'
             }, {
                 productid : 'RP-LI-02',
                 name : 'Iguana'
             }, {
                 productid : 'FL-DSH-01',
                 name : 'Manx'
             }, {
                 productid : 'FL-DLH-02',
                 name : 'Persian'
             }, {
                 productid : 'AV-CB-01',
                 name : 'Amazon Parrot'
             }
         ];
         function productFormatter(value) {
             for (var i = 0; i < products.length; i++) {
                 if (products[i].productid == value)
                     return products[i].name;
             }
             return value;
         }
相关文章
|
4天前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
11 2
|
4天前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
9 0
|
1天前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
|
1天前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
|
3月前
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
|
3月前
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
|
3月前
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决
|
3月前
EasyUI Datagrid 分页事件
EasyUI Datagrid 分页事件
|
3月前
|
JavaScript
EasyUI的datagrid每行数据添加操作按钮的方法
EasyUI的datagrid每行数据添加操作按钮的方法