码迷,mamicode.com
首页 > 其他好文 > 详细

easyui 在编辑状态下,动态修改其他列值。

时间:2016-06-18 01:19:04      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:

 1     首先是自定义了一个方法uodateColumn更新列值  
 2       
 3     /**  
 4                  *自定义的修改列值方法   
 5                  */  
 6                 $.extend($.fn.datagrid.methods, {  
 7                     updateColumn: function(datagrid,data) {  
 8                         datagrid.each(function(){  
 9                             //获取缓存中的配置数据  
10                             var gridObj=$.data(this,"datagrid");  
11                             var opts=gridObj.options;  
12                             //获取行数据  
13                             var row=opts.finder.getRow(this,data.index);  
14                             data.row=data.row||{};  
15                             var update=false;  
16                             //判断是否需要更新  
17                             for(var updateColumn in data.row){  
18                                 if(data.row[updateColumn]!==row[updateColumn]){  
19                                     update=true;  
20                                     break;  
21                                 }  
22                             }  
23                             if(update){  
24                                 var tr=opts.finder.getTr(this,data.index);  
25                                 var view=opts.view.renderRow.call(opts.view,this,["attr1"],true,data.index,data.row);  
26                                 if(tr.hasClass("datagrid-row-editing")){  
27                                     //找到所有需要更新值的列  
28                                     tr.find(‘div‘).each(function(i){  
29                                         if(data.row[$(this).parent().attr(‘field‘)]!=undefined){  
30                                             if($(this).attr(‘class‘).indexOf(‘datagrid-editable‘)!=-1){  
31                                                 var ed=$.data(this,"datagrid.editor");  
32                                                 if(ed!=undefined){  
33                                                     ed.actions.setValue(ed.target,data.row[$(this).parent().attr(‘field‘)]);  
34                                                 }else{  
35                                                     $(this).html(data.row[$(this).attr(‘field‘)]);  
36                                                 }                                             
37                                             }else{  
38                                                 $(this).html(data.row[$(this).attr(‘field‘)]);  
39                                                 $(this).addClass("datagrid-editable"); 
40                                             }  
41                                         }  
42                                     });  
43                                 }  
44                             }  
45                         });  
46                     }  
47                 });  

在这里,还有一个需要注意的时,我们将没在编辑状态下的列设值的同时添加了class:datagrid-editable;

所以在easyui.min.js中针对结束编辑的方法中会对该类进行扫描获取editor对象,但我们在这里是获取不到的。

所以在源码中我们加入了以下处理方法:

if(ed!=undefined){
var t=$(ed.target);
var _6eb=t.data("textbox")?t.textbox("textbox"):t;
_6eb.triggerHandler("blur");
var _6ec=ed.actions.getValue(ed.target);
if(row[_6ea]!=_6ec){
row[_6ea]=_6ec;
_6e8=true;
_6e9[_6ea]=_6ec;
}
}else{
$(this).removeClass("datagrid-editable");
var _6cv=$(this).html();
if(row[_6ea]!=_6cv){
row[_6ea]=_6cv;
_6e8=true;
_6e9[_6ea]=_6cv;
}
}

其实更明确的做法是将endEdit也重写了。这样就避免了懂源码。



在html页面中按照easyui的表格使用,声明表格:

<pre name="code" class="html">$(‘#demo‘).datagrid({
                fitColumns: true,
                iconCls: ‘icon-edit‘,
                singleSelect: true,
                url: ‘js/datagrid_data1.json‘,
                method: ‘get‘,
                onClickRow: onClickRow,
                onEndEdit: onEndEdit,
                columns: [
                    [{
                        field: ‘itemid‘,
                        title: ‘Item ID‘,
                        width: 20,
                        align: ‘center‘,
                        checkbox: true
                    }, {
                        field: ‘productid‘,
                        title: ‘productid‘,
                        width: 20,
                        sortable: true,
                        align: ‘center‘
                    }, {
                        field: ‘listprice‘,
                        title: ‘List Price‘,
                        width: 20,
                        align: ‘center‘,
                        editor: {
                            type: ‘numberbox‘,
                            options: {
                                precision: 2,
                                groupSeparator: ‘,‘
                            }
                        }
                    }, {
                        field: ‘unitcost‘,
                        title: ‘unitcost‘,
                        width: 20,
                        sortable: true,
                        editor: {
                            type: ‘textbox‘
                        }
                    }, {
                        field: ‘attr1‘,
                        title: ‘attr1‘,
                        width: 20,
                        sortable: true,
                        editor:{
                            type:‘datebox‘
                        }
                    }, {
                        field: ‘status‘,
                        title: ‘status‘,
                        width: 20,
                        sortable: true,
                        align: ‘left‘,
                        editor:{
                            type:‘combobox‘,
                            options:{
                                valueField:‘id‘,
                                textField:‘text‘,
                                data:[{id:1,text:‘一号‘},{id:2,text:‘二号‘}]
                            }
                        }
                    }]
                ]
            });

//声明一些打开编辑的事件

 

var editIndex = undefined;

            function endEditing() {
                if (editIndex == undefined) {
                    return true
                }
                if ($(‘#demo‘).datagrid(‘validateRow‘, editIndex)) {
                    $(‘#demo‘).datagrid(‘endEdit‘, editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }

            function onClickRow(index) {
                if (editIndex != index) {
                    if (endEditing()) {
                        $(‘#demo‘).datagrid(‘selectRow‘, index).datagrid(‘beginEdit‘, index);
                        var ed = $(‘#demo‘).datagrid(‘getEditor‘, {
                            index: index,
                            field: ‘listprice‘
                        });
                        if (ed) {
                            ed.target.textbox({
                                inputEvents: $.extend({}, $.fn.textbox.defaults.inputEvents, {
                                    keydown: function(e) {
                                        if (e.keyCode == 13) {
                                            var row = $(‘#demo‘).datagrid(‘getSelected‘);
                                            $(‘#demo‘).datagrid(‘updateColumn‘,{index:index,row:{attr1:‘2016-01-12‘,status:‘1‘,unitcost:‘33‘}});
                                        }
                                    }
                                })
                            });
                        }
                        editIndex = index;
                    } else {
                        setTimeout(function() {
                            $(‘demo‘).datagrid(‘selectRow‘, editIndex);
                        }, 0);
                    }
                }
            }
            function onEndEdit(index, row) {
                console.log(row);
            }

 

easyui 在编辑状态下,动态修改其他列值。

标签:

原文地址:http://www.cnblogs.com/freemrz/p/5595437.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!