<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);
}
jqGrid表格 添加行数据 开启可编辑行
最新推荐文章于 2024-09-19 16:28:34 发布