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

<div class="row umar-t">
                <div class="uinn-l32 uinn-b16 uinn-t24 ">
                    <button class="btn btn-primary addright" type="button" οnclick="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 οnclick="editValue(\''+rowData.id+'\',this)" class="tx-189 shouzhi umar-r16">'+me+'</span><span οnclick="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);
    }
    

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值