扩展jQuery easyui datagrid增加动态改变列编辑的类型

原创

horizon_hello 2021-06-03 14:00:51 ©著作权

©著作权归作者所有：来自51CTO博客作者horizon_hello的原创作品，请联系作者获取转载授权，否则将追究法律责任

 (param = $(jq).datagrid('getColumnOption'== $(jq).datagrid('getColumnOption'= (param = $(jq).datagrid('getColumnOption'== $(jq).datagrid('getColumnOption'=

为itemid字段添加一个editor

"#tt").datagrid('addEditor''itemid''validatebox'"#tt").datagrid('removeEditor', 'itemid'

注：两个方法，第二个参数都可以传递数组。

转自：http://easyui.btboys.com/post-83.html

demo(为easyui里的一个加上上面的几句和两个按钮后的demo粘到easyui的demo里就可以了):

Editable DataGrid - jQuery EasyUI Demo
    $.extend($.fn.datagrid.methods, {
        addEditor : function(jq, param) {            if (param instanceof Array) {
                $.each(param, function(index, item) {
                    var e = $(jq).datagrid('getColumnOption', item.field);
                    e.editor = item.editor;
                });
            } else {
                var e = $(jq).datagrid('getColumnOption', param.field);
                e.editor = param.editor;
            }
        },
        removeEditor : function(jq, param) {            if (param instanceof Array) {
                $.each(param, function(index, item) {
                    var e = $(jq).datagrid('getColumnOption', item);
                    e.editor = {};
                });
            } else {
                var e = $(jq).datagrid('getColumnOption', param);
                e.editor = {};
            }
        }
    });
    function test_add(){
        $("#tt").datagrid('addEditor', {
            field : 'itemid',
            editor : {
                type : 'validatebox',
                options : {
                    required : true
                }
            }
        });
    }
    function test_remove(){
        $("#tt").datagrid('removeEditor', 'itemid');
    }    
    
    
    
    
    
        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){                if (products[i].productid == value) return products[i].name;
            }            return value;
        }
        $(function(){
            var lastIndex;
            $('#tt').datagrid({
                toolbar:[{
                    text:'append',
                    iconCls:'icon-add',
                    handler:function(){
                        $('#tt').datagrid('endEdit', lastIndex);
                        $('#tt').datagrid('appendRow',{
                            itemid:'',
                            productid:'',
                            listprice:'',
                            unitprice:'',
                            attr1:'',
                            status:'P'
                        });
                        lastIndex = $('#tt').datagrid('getRows').length-1;
                        $('#tt').datagrid('selectRow', lastIndex);
                        $('#tt').datagrid('beginEdit', lastIndex);
                    }
                },'-',{
                    text:'delete',
                    iconCls:'icon-remove',
                    handler:function(){
                        var row = $('#tt').datagrid('getSelected');                        if (row){
                            var index = $('#tt').datagrid('getRowIndex', row);
                            $('#tt').datagrid('deleteRow', index);
                        }
                    }
                },'-',{
                    text:'accept',
                    iconCls:'icon-save',
                    handler:function(){
                        $('#tt').datagrid('acceptChanges');
                    }
                },'-',{
                    text:'reject',
                    iconCls:'icon-undo',
                    handler:function(){
                        $('#tt').datagrid('rejectChanges');
                    }
                },'-',{
                    text:'GetChanges',
                    iconCls:'icon-search',
                    handler:function(){
                        var rows = $('#tt').datagrid('getChanges');
                        alert('changed rows: ' + rows.length + ' lines');
                    }
                }],
                onBeforeLoad:function(){
                    $(this).datagrid('rejectChanges');
                },
                onClickRow:function(rowIndex){                    if (lastIndex != rowIndex){
                        $('#tt').datagrid('endEdit', lastIndex);
                        $('#tt').datagrid('beginEdit', rowIndex);
                    }
                    lastIndex = rowIndex;
                }
            });
        });    " _ue_custom_node_="true">Editable DataGrid<div class="demo-info" style="margin-bottom:10px"><div class="demo-tip icon-tip">

Click the row to start editing.