easyui datagrid 编辑的时候只能编辑一行,当要编辑下一行时这行取消编辑!

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui datagrid 编辑的时候只能编辑一行,当要编辑下一行时这行取消编辑!相关的知识,希望对你有一定的参考价值。

参考技术A <script type = "text/javascript">
var editindex = undefined;
function onClickRow(index)//这是触发行事件

if(endediting())
$('#dg').datagrid('selectRow',index).datagrid('beginedit',index)//其中beginEdit方法为datagrid的方法,具体可以参看api
editIndex = index;//给editIndex对象赋值,index为当前行的索引
else
$('#dg').datagrid('selectRow',edtiIndex);



function endEditing()

if(editIndex == undefined) return true;//如果为undefined的话,为真,说明可以编辑
if($('#dg').datagrid('validateRow',editIndex))
#('#dg').datagrid('endEdit',editIndex);//当前行编辑事件取消
editIndex = undefined; return true;//重置编辑行索引对象,返回真,允许编辑
elsereturn false;//否则,为假,返回假,不允许编辑

</script>
再将onClickRow()方法加在你需要编辑的datagrid中,easyuidatagrid中存在一个onClickRow,点击行事件,对应上就可以了。还可以设置点击行的颜色,编辑后的颜色,很有意思,具体参看api,希望能帮到你。本回答被提问者采纳

Editable DataGrid 实现列表新增编辑功能

今天在开发一个功能时候,需要直接在列表实现新增、编辑等功能。于是查看easyui 相关文档,找到相关解决办法。
easyui的datagrid支持可编辑功能使用户能够数据网格中添加一个用户可以更新一个多个

 

下面是我在项目中的实现代码:
第一步:引用
      easyui.css
第二步:Html和Javascript代码
    <h2>Editable DataGrid Demo</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip">&nbsp;</div>
        <div>Click the edit button on the right side of row to start editing.</div>
    </div>
    
    <div style="margin:10px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="insert()">Insert Row</a>
    </div>
    
    <table id="tt"></table>
    
    <script>
        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(){
            $(#tt).datagrid({
                title:Editable DataGrid,
                iconCls:icon-edit,
                width:660,
                height:250,
                singleSelect:true,
                idField:itemid,
                url:data/datagrid_data.json,
                columns:[[
                    {field:itemid,title:Item ID,width:60},
                    {field:productid,title:Product,width:100,
                        formatter:function(value,row){
                            return row.productname || value;
                        },
                        editor:{
                            type:combobox,
                            options:{
                                valueField:productid,
                                textField:name,
                                data:products,
                                required:true
                            }
                        }
                    },
                    {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:180,editor:text},
                    {field:status,title:Status,width:50,align:center,
                        editor:{
                            type:checkbox,
                            options:{
                                on: P,
                                off: ‘‘
                            }
                        }
                    },
                    {field:action,title:Action,width:80,align:center,
                        formatter:function(value,row,index){
                            if (row.editing){
                                var s = <a href="javascript:void(0)" onclick="saverow(this)">Save</a> ;
                                var c = <a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>;
                                return s+c;
                            } else {
                                var e = <a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ;
                                var d = <a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>;
                                return e+d;
                            }
                        }
                    }
                ]],
                onEndEdit:function(index,row){
                    var ed = $(this).datagrid(getEditor, {
                        index: index,
                        field: productid
                    });
                    row.productname = $(ed.target).combobox(getText);
                },
                onBeforeEdit:function(index,row){
                    row.editing = true;
                    $(this).datagrid(refreshRow, index);
                },
                onAfterEdit:function(index,row){
                    row.editing = false;
                    $(this).datagrid(refreshRow, index);
                },
                onCancelEdit:function(index,row){
                    row.editing = false;
                    $(this).datagrid(refreshRow, index);
                }
            });
        });
        function getRowIndex(target){
            var tr = $(target).closest(tr.datagrid-row);
            return parseInt(tr.attr(datagrid-row-index));
        }
        function editrow(target){
            $(#tt).datagrid(beginEdit, getRowIndex(target));
        }
        function deleterow(target){
            $.messager.confirm(Confirm,Are you sure?,function(r){
                if (r){
                    $(#tt).datagrid(deleteRow, getRowIndex(target));
                }
            });
        }
        function saverow(target){
            $(#tt).datagrid(endEdit, getRowIndex(target));
        }
        function cancelrow(target){
            $(#tt).datagrid(cancelEdit, getRowIndex(target));
        }
        function insert(){
            var row = $(#tt).datagrid(getSelected);
            if (row){
                var index = $(#tt).datagrid(getRowIndex, row);
            } else {
                index = 0;
            }
            $(#tt).datagrid(insertRow, {
                index: index,
                row:{
                    status:P
                }
            });
            $(#tt).datagrid(selectRow,index);
            $(#tt).datagrid(beginEdit,index);
        }
    </script>
    

希望可以帮到有类似需求的朋友。

 
      

以上是关于easyui datagrid 编辑的时候只能编辑一行,当要编辑下一行时这行取消编辑!的主要内容,如果未能解决你的问题,请参考以下文章

jquery easyui里面如何设置某列是可以编辑的,并且只能编辑数字,急啊!!!!!!

easyui datagrid编辑单元格的时候失去焦点结束编辑代码怎么写

easyui datagrid 动态加入移除editor

easyui combobox 在datagrid中动态加载数据

(原创)EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件

easyui datagrid的文本编辑器textarea都有哪些配置项