jqGrid表格 添加行数据 开启可编辑行

<div class="row umar-t">
                <div class="uinn-l32 uinn-b16 uinn-t24 ">
                    <button class="btn btn-primary addright" type="button" onclick="saveBtn()">添加属性配置</button>
                </div>
                <div class="uinn-b60">
                    <div class="col-xs-12">
                        <table id="grid-table" style="color: #919191; font-size: 12px; font-family: '微软雅黑';"></table>
                    </div>
                </div>
            </div>
        </div>
    <script type="text/javascript">
    var currentRowId; //当前行id
    var grid_selector = "#grid-table";
    $(function(){
    
        var grid = $.jqGrid.init({
             multiselect: true,
             rownumbers: true,//显示序号
             pagejson:false,
             datatype: "local",
            data:arry,
            colNames: ['ID', '属性名称','属性值','属性描述','操作'],
            colModel: [
               {name: 'id',index: 'id',width: 60,key: true,hidden: true},
               {name: 'name',index: 'name',editable: true},
               {name: 'value',index: 'value',editable: true},
               {name: 'description',index: 'description',editable: true},
               {name: 'valueType',index: 'valueType',
                   formatter:function(value,options,rowData){
                       var me = "修改";
                      if(value=="保存")
                           me = "保存"
                       return '<span onclick="editValue(\''+rowData.id+'\',this)" class="tx-189 shouzhi umar-r16">'+me+'</span><span onclick="delRowValue(\''+rowData.id+'\')" class="tx-189 shouzhi umar-r16">删除</span>'
                }}
               ],
               ondblClickRow : function(rowid, iRow, iCol, e) {
                  // $(grid_selector).jqGrid('saveRow', rowid);
               },
               editurl:"clientArray",//仅保存数据到grid中,不会向服务器提交数据(若没这一句,从编辑进来这个界面,编辑和新增grid数据会向服务器提交数据)
        });
        $(grid_selector).setGridHeight('px');
    })
    
    function saveBtn(){//添加属性设置按钮
        //如果不为空并且有处于编辑的行,则先保存
        if(currentRowId !="" && $("#grid-table").find(".editable").length > 0){
            saveRow();
        }
        $("#grid-table").jqGrid('resetSelection');//取消所有选中的行
           currentRowId = buildUUID().toUpperCase();// 自定义32位 行id 
        var row = {"id" : currentRowId};
        $("#grid-table").jqGrid("addRowData", currentRowId, row, "first");//插入一条新数据
        $("#grid-table").jqGrid("editRow", currentRowId,{ keys: true});//开启可编辑模式
        $("#grid-table").jqGrid('setCell', currentRowId, 'valueType', "保存");
        
    }
    
    /**删除行**/
    function delRowValue(rowId){
        $("#grid-table").jqGrid("delRowData", rowId);
    }
    
    /**编辑行**/
    function editValue(rowId,obj){
        if($(obj).html() == "保存"){
            $("#grid-table").jqGrid('saveRow', rowId);
            $("#grid-table").jqGrid('setCell', rowId, 'valueType', "修改");
        }else{
            //如果不为空并且有处于编辑的行,则先保存
            if(currentRowId !="" && $("#grid-table").find(".editable").length > 0){
                saveRow();
            }
            currentRowId = rowId;
            $("#grid-table").jqGrid("editRow", rowId,{ keys: true});//开启可编辑模式
            $("#grid-table").jqGrid('setCell', rowId, 'valueType', "保存");
        }
    }
    
    /**保存行**/
    function saveRow(){
        $("#grid-table").jqGrid('setCell', currentRowId, 'valueType', "修改");
        $("#grid-table").jqGrid('saveRow',currentRowId);
    }
    

猜你喜欢

转载自blog.csdn.net/qq_42556903/article/details/85318515