JQGrid的用法解析(列編輯,添加行,刪除行)

2019-11-20 21:45:32

字體：大中小

來源：轉載

供稿：網友

$(document).ready(function()
{
initPlsfList();
});
//初始化grid列表
function initPlsfList(){
//緩存表列數組,key 為頁面元素的name ，value 對應數據庫中的字段
var cellArray = new Array();
cellArray["zoneID"] ="ZONE_ID";
cellArray["factorPG"] ="FACTOR_PG";
cellArray["factorQG"] ="FACTOR_QG";
cellArray["factorPL"] ="FACTOR_PL";
cellArray["factorQL"] ="FACTOR_QL";
cellArray["valid"] ="VALID";

});

//grid添加新的一行
var newrowid ;
function addRow()
{
$("#operate").val("");
var selectedId = $("#plsfList").jqGrid("getGridParam", "selrow");
var ids = jQuery("#plsfList").jqGrid('getDataIDs');
//獲得當前最大行號（數據編號）
var rowid = Math.max.apply(Math,ids);
//獲得新添加行的行號（數據編號）
newrowid = rowid+1;
    var dataRow = {
    id: "",
    valid:"",
    zoneID:'',
    factorPG:'',
    factorQG:'',
    factorPL:'',
    factorQL:'',
    caseID:''
    };

    //將新添加的行插入到第一列
    $("#plsfList").jqGrid("addRowData", newrowid, dataRow, "first");
    //設置grid單元格不可編輯
    $("#plsfList").setGridParam({cellEdit:false});
    //設置grid單元格可編輯
    $('#plsfList').jqGrid('editRow', newrowid, false);
    //確定按鈕可用
    $("#confirm_btn").attr("disabled",false);
    //給添加的列加選擇按鈕
    var $zoneInput = $("#"+newrowid+"_zoneName");
    $zoneInput.attr("disabled",true).css("width",100);
$zoneInput.after("<input type='button' value='選擇' onclick='fnCallDialogForEidt()' />");

}

function insertPlsf(){
var $plsfList = $("#plsfList") ;
var $operate = $("#operate").val();
//設置grid單元格可編輯
$plsfList.setGridParam({cellEdit:true});
//設置grid行不可編輯
//$plsfList.jqGrid('editRow', newrowid, false);
//拼接請求的url
var url = '<%=basePath%>'+"/lfc/powerlsfactor/save" ;
var $params = $plsfList.find("input[id^="+newrowid+"]");
var $check_val = $params.eq(0).is(':checked') ? 1:0;
url = addParamToUrl(url,'valid',$check_val);
url = addParamToUrl(url,'zoneID',$("#zone_id").val());
url = addParamToUrl(url,'factorPG',$params.eq(2).val());
url = addParamToUrl(url,'factorQG',$params.eq(3).val());
url = addParamToUrl(url,'factorPL',$params.eq(4).val());
url = addParamToUrl(url,'factorQL',$params.eq(5).val());

var $caseID = $("#caseID").val();
url = addParamToUrl(url,'caseID',$caseID);

$.ajax({url:url,type:"post",timeout:5000,
      success:function(data){
          showMessage(data);
          reloadGrid();
      }
});
//將新添加行號初始為空
newrowid = '' ;
//確定按鈕不可用
    $("#confirm_btn").attr("disabled",true);
}

//格式zone列輸出內容
function formatZone(cellvalue, options, rowObject){
if(cellvalue == 0){
  return 0;
}else if(cellvalue == 1){
  return 1;
}else if(cellvalue == 2){
  return 2;
}else{
  return 3;
}
}

function isRowNeedSave($jqgrid){
var $editTr = $jqgrid.find("tr[editable=1]") ;
var flag = false ;
if ( $editTr && $editTr.length > 0){
flag = true ;
}
return flag ;
}

function cancel(){
reloadGrid();
//確定按鈕不可用
    $("#confirm_btn").attr("disabled",true);
    //設置grid單元格可編輯
    $("#plsfList").setGridParam({cellEdit:true});
    //設置grid單元格可編輯
    $('#plsfList').jqGrid('editRow', newrowid, true);
}

function fnCallDialogForEidt(){
//獲得當前行號（數據編號）
var returnValue = "";
returnValue = window.showModalDialog("<c:url value='/element/zone/query?caseID="+$("#caseID").val()+"' />",window,"");
if(returnValue==""||returnValue==null)
return;
var $plsfList = $("#plsfList");
var $params = $plsfList.find("input[id$='zoneName']");
var names = returnValue.split(",");
$params.eq(0).val(names[1]);
$("#zone_id").val(names[0]);
}