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

最新推荐文章于 2022-05-06 10:43:34 发布

YGL一米阳光

最新推荐文章于 2022-05-06 10:43:34 发布

阅读量466

点赞数

分类专栏： easyui 文章标签： js easyui javascript jquery datagrid

本文链接：https://blog.csdn.net/u010881625/article/details/108499617

版权

easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

$.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 = {};
            }
        }
    });
使用方式：
为itemid字段添加一个editor
    function test_add(){
        $("#tt").datagrid('addEditor', {
            field : 'itemid',
            editor : {
                type : 'validatebox',
                options : {
                    required : true
                }
            }
        });
    }删除itemid字段的editor:
    function test_remove(){
        $("#tt").datagrid('removeEditor', 'itemid');
    }

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

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Editable DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script>
    $.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<products.length; 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;
                }
            });
        });
    </script>
</head>
<body>
    <h2>Editable DataGrid</h2>
    <div class="demo-info" style="margin-bottom:10px">
        <div class="demo-tip icon-tip"></div>
        <div>Click the row to start editing.</div>
    </div>
    
    <table id="tt" style="width:700px;height:auto"
            data-options="iconCls:'icon-edit',singleSelect:true,idField:'itemid',url:'datagrid_data2.json'"
            title="Editable DataGrid">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:100,formatter:productFormatter,
                        editor:{
                            type:'combobox',
                            options:{
                                valueField:'productid',
                                textField:'name',
                                data:products,
                                required:true
                            }
                        }">Product</th>
                <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
                <th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
                <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
            </tr>
        </thead>
    </table>
    <input type="button" value="test_add" onclick="test_add();"/>
    <input type="button" value="test_remove" onclick="test_remove();"/>
</body>
</html>

扩展后应用代码，列举了1：移除多个列；2：重新启用可支持扩展

//打开行编辑后,禁用移除指定的列字段
$('jq').datagrid('removeEditor',
			["fieldid001","fieldid002","fieldid003",....]);
//重新打开编辑需重新设置
$('jq').datagrid('selectRow', index).datagrid('addEditor',{
			field : 'recchndbid',
			editor:{
				type:'combobox',
				options:{
					valueField: 'recchndbid',
					textField: 'recchnname',
					editable:true,
					required:true,
					panelHeight: 150,
					onSelect:function(record){
						let rowIndex = getRowIndex(this);
						//选中代码实现
					}
				}
			}
});