JQGrid的用法解析(列编辑,添加行,删除行)

146 阅读 0 评论 97 点赞

我是靠谱客的博主高贵鞋子，最近开发中收集的这篇文章主要介绍JQGrid的用法解析(列编辑,添加行,删除行)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

$(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]);
}