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


  本文标签:JQGrid,删除行

复制代码 代码如下:

<script>

$(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";
 

 var caseID = ${caseID};
 $("#plsfList").jqGrid({
        url:"<c:url value=/lfc/powerlsfactor/queryData?caseID="+caseID+" />",
        datatype: "json",
        mtype:"POST",
        height: "auto",
        width: "auto",
        colNames:[
                  id,
                  "<fmt:message key=case.valid/>",
                  "<fmt:message key=zone/>",
                  "<fmt:message key=pasf/>",
                  "<fmt:message key=pisf/>",
                  "<fmt:message key=lasf/>",
                  "<fmt:message key=lisf/>",
                  modeID
                  ],
        colModel:[
                  {name:id,index:id, width:100,hidden:true},
                  {name:valid,index:valid, width:100,editable:true,
                   formatter:formatValid,
       editable:true,edittype:checkbox,
             editoptions:{value:1:0,defaultValue:1}
                  },
                  {name:zoneName,index:zoneName, width:150,editable:true},
                  {name:factorPG,index:factorPG, width:100,editable:true},
                  {name:factorQG,index:factorQG, width:100,editable:true},
                  {name:factorPL,index:factorPL, width:100,editable:true},
                  {name:factorQL,index:factorQL, width:100,editable:true},
                  {name:caseID,index:caseID, width:100,hidden:true},
                 ],
        rowNum:10,
        rowList:[10,20,30],
        pager: ,
        cellEdit:true,
        viewrecords: true,
        jsonReader: { repeatitems : false, id: "id" },
        viewsortcols:[false,horizontal,false],
        sortable:false,
        sortorder:"asc",
        sortname:"id",
        multiselect: true,
        cellurl:"<c:url value=/lfc/powerlsfactor/save/>",
     cellsubmit: remote,
        gridComplete: function() {
         var $selecAll = $("#cb_plsfList");
         var cb_title = "<fmt:message key=select.all bundle=${commonResources}/>" ;
         if($selecAll){
          $selecAll.attr("title",cb_title);
         }
         //设置全选checkbox title
            var rowIds = jQuery("#plsfList").jqGrid(getDataIDs);
            for(var k=0; k<rowIds.length; k++) {
               var curRowData = jQuery("#plsfList").jqGrid(getRowData, rowIds[k]);
               var curChk = $("#"+rowIds[k]+"").find(":checkbox");
               //curChk.attr(title, curRowData.modeName);   //给checkbox赋予额外的属性值
            }

        },
        onSortCol:function(index,iCol,sortorder){
         return false ;
        },
        ondblClickRow: function (rowid,iRow,iCol,e) {
         /*var $plsfList = $("#plsfList");
         if (isRowNeedSave($plsfList)){
          showMessage("请先保存");
         }else{
          $("#operate").val("update");
          newrowid = rowid ;
          $plsfList.setGridParam({cellEdit:false});
          $plsfList.jqGrid(editRow, rowid, true);
          //确定按钮可用
             $("#confirm_btn").attr("disabled",false);

         }*/
        },
        beforeSubmitCell:function(rowid, cellname, value, iRow, iCol){
         //列提交前的拦截方法
         var $plsfList = $("#plsfList") ;
         var $editUrl = <c:url value=/lfc/powerlsfactor/save/> ;
         //设置列提交的url 。updateCellName:要编辑的列名 ;updateCellValue :是编辑的值
         $editUrl = addParamToUrl($editUrl,updateCellName,iCol == 3 ? cellArray[zoneID] :cellArray[cellname]);
         $editUrl = addParamToUrl($editUrl,updateCellValue,iCol == 3 ? $("#zone_id").val():value);
         //给jqgrid 从新设置cellurl 值
         $plsfList.setGridParam({cellurl:$editUrl});
         return false ;
        },
        afterEditCell:function(rowid, cellname, value, iRow, iCol){
        //动态修改lie时,当列 变为可修改状态时,给列add一个button,且列中元素不可编辑,点击button  弹出一个模态窗口,可以选择元素 ,赋值给grid当前编辑列中单行表单域中.
         $("#"+rowid+" input[type=checkbox]").attr("checked",value == "<fmt:message key=case.valid/>" ? true:false);
         if(iCol==3){
          $("#irowNum").val(rowid);
          var $data = $("#"+rowid +">td"); //获取这个行里所有的td元素,即:获取所有子元素
          $zoneInput = $data.find("input").eq("1") ;
          $zoneInput.css("width","100px");
          $zoneInput.attr("disabled",true);
          $zoneInput.after("<input type=button value=选择 onclick=fnCallDialogForEidt() />");
      }
        }

    });


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