easyui datagrid 动态加入、移除editor

使用easyui 行编辑的时候完毕编辑的功能比較简单,可是假设要依据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比較麻烦了。 
比方像以下这样:加入行的时候每一个值都是手动输入,改动的时候第一个值不能改动。我们来看下怎么实现这种效果。 
这里写图片描写叙述

easyui本身是不提供这么细节的功能的。须要我们自己拓展下: 
在编辑的时候移除第一列的editor属性,加入的时候,加入第一列的属性。

//扩展datagrid:动态加入删除editor
    $.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 = {};  
            }   
        }
    });

(代码出自网上大神。

调用: 
移除:

$("#dg").datagrid('removeEditor','cardNo');//这里的cardNo是须要移除editor的列的field值

加入:

$("#dg").datagrid('addEditor',[ //加入cardNo列editor
            {field:'cardNo',editor:{
                type:'textbox',
                options:{
                    required:true,
                    validType:'length[3,3]', 
                    invalidMessage:'请输入3位号码!'
                }
            }
        }]

别的操作都能够据此拓展. 

转自:https://www.cnblogs.com/gccbuaa/p/7073184.html

在使用EasyUIdatagrid时,如果在取消编辑后单元格的下拉框样式消失了,可能是由于以下几个原因导致的: 1. **样式覆盖**:取消编辑后,datagrid会重新渲染单元格内容,可能会导致自定义样式被覆盖。 2. **事件绑定**:编辑状态下的事件绑定在取消编辑后可能没有正确移除或重新绑定,导致样式失效。 3. **渲染问题**:取消编辑后,datagrid可能没有正确渲染下拉框的样式。 为了解决这个问题,可以尝试以下几种方法: 1. **检查样式覆盖**:确保取消编辑后,单元格的样式没有被其他CSS规则覆盖。可以在浏览器的开发者工具中检查元素的样式。 2. **重新绑定事件**:在取消编辑后,手动重新绑定下拉框的事件,确保其功能正常。 3. **自定义渲染**:在datagrid的`onAfterEdit`事件中,手动重新渲染下拉框的样式。 以下是一个示例代码,展示了如何在取消编辑后重新渲染下拉框样式: ```html <table id="dg" title="DataGrid" class="easyui-datagrid" style="width:700px;height:300px" url="data.json" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="name" width="50" editor="text">Name</th> <th field="value" width="50" editor="text">Value</th> <th field="type" width="50" editor="{type:'combobox', options:{valueField:'value', textField:'text', data:types}}">Type</th> </tr> </thead> </table> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="append()">Append</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeit()">Remove</a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="accept()">Accept</a> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="reject()">Reject</a> </div> <script> var types = [{value: '1', text: 'Type 1'}, {value: '2', text: 'Type 2'}]; function append(){ $('#dg').datagrid('appendRow', {name: '', value: '', type: ''}); } function removeit(){ var row = $('#dg').datagrid('getSelected'); if (row){ var index = $('#dg').datagrid('getRowIndex', row); $('#dg').datagrid('deleteRow', index); } } function accept(){ $('#dg').datagrid('acceptChanges'); } function reject(){ $('#dg').datagrid('rejectChanges'); } </script> ``` 在这个示例中,`accept`函数用于提交更改,`reject`函数用于取消编辑。在取消编辑后,`rejectChanges`方法会重新渲染单元格内容。如果下拉框样式仍然有问题,可以在`onAfterEdit`事件中手动重新渲染下拉框样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值