JQGrid usage resolution of column edit add rows delete rows

  • 2020-03-26 23:48:32
  • OfStack


<script>
$(document).ready(function()
{
 initPlsfList();
});
//Initializes the grid list
function initPlsfList(){
 //Cache the array of table columns, the key is the name of the page element, and the value corresponds to the field in the database
 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);
         }
         //Set the checkbox title to all
            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);   // to checkbox Assign additional attribute values 
            }

        },
        onSortCol:function(index,iCol,sortorder){
         return false ;
        },
        ondblClickRow: function (rowid,iRow,iCol,e) {
         /*var $plsfList = $("#plsfList");
         if (isRowNeedSave($plsfList)){
          showMessage(" Please save first ");
         }else{
          $("#operate").val("update");
          newrowid = rowid ;
          $plsfList.setGridParam({cellEdit:false});
          $plsfList.jqGrid('editRow', rowid, true);
          //Ok button available
             $("#confirm_btn").attr("disabled",false);

         }*/
        },
        beforeSubmitCell:function(rowid, cellname, value, iRow, iCol){
         //The interception method before column submission
         var $plsfList = $("#plsfList") ;
         var $editUrl = '<c:url value='/lfc/powerlsfactor/save'/>' ;
         //Set the url for the column submission. UpdateCellName: the column name to edit; UpdateCellValue: is an edited value
         $editUrl = addParamToUrl($editUrl,'updateCellName',iCol == 3 ? cellArray['zoneID'] :cellArray[cellname]);
         $editUrl = addParamToUrl($editUrl,'updateCellValue',iCol == 3 ? $("#zone_id").val():value);
         //Reset the cellurl value for the jqgrid
         $plsfList.setGridParam({cellurl:$editUrl});
         return false ;
        },
        afterEditCell:function(rowid, cellname, value, iRow, iCol){
        //When dynamically modifying a lie, when the column becomes modifiable, add a button to the column, and the elements in the column are not editable, click button ; A modal window pops up where you can select an element and assign a value to a single row of form fields in the current edit column of the 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"); //Gets all td elements in the row, that is, gets all child elements
          $zoneInput = $data.find("input").eq("1") ;
          $zoneInput.css("width","100px");
          $zoneInput.attr("disabled",true);
          $zoneInput.after("<input type='button' value=' choose ' onclick='fnCallDialogForEidt()' />");
      }
        }
    });

//Add a new row to the grid
var newrowid ;
function addRow()
{
 $("#operate").val("");
 var selectedId = $("#plsfList").jqGrid("getGridParam", "selrow"); 
 var ids = jQuery("#plsfList").jqGrid('getDataIDs');
 //Get the current maximum line number (data number)
 var rowid = Math.max.apply(Math,ids);
 //Get the line number of the newly added line (data number)
 newrowid = rowid+1;
    var dataRow = {  
     id: "",
     valid:"",
     zoneID:'',
     factorPG:'',
     factorQG:'',
     factorPL:'',
     factorQL:'',
     caseID:''
    };    

    //Inserts the newly added row into the first column
    $("#plsfList").jqGrid("addRowData", newrowid, dataRow, "first");
    //Make the grid cell uneditable
    $("#plsfList").setGridParam({cellEdit:false});
    //Set the grid cell to be editable
    $('#plsfList').jqGrid('editRow', newrowid, false);
    //Ok button available
    $("#confirm_btn").attr("disabled",false);
    //Add a select button to the added column
    var $zoneInput = $("#"+newrowid+"_zoneName");
    $zoneInput.attr("disabled",true).css("width",100);
 $zoneInput.after("<input type='button' value=' choose ' onclick='fnCallDialogForEidt()' />");

}

function insertPlsf(){
 var $plsfList = $("#plsfList") ;
 var $operate = $("#operate").val();
 //Set the grid cell to be editable
 $plsfList.setGridParam({cellEdit:true});
 //Set the grid row to be uneditable
 //$plsfList.jqGrid('editRow', newrowid, false);
 //Splice the url of the request
 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();
      }
 });
 //The newly added line number is initially null
 newrowid = '' ;
 //Make sure the button is not available
    $("#confirm_btn").attr("disabled",true);
}

//The format zone column outputs the content
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();
 //Make sure the button is not available
    $("#confirm_btn").attr("disabled",true);
    //Set the grid cell to be editable
    $("#plsfList").setGridParam({cellEdit:true});
    //Set the grid cell to be editable
    $('#plsfList').jqGrid('editRow', newrowid, true);
}
 
function fnCallDialogForEidt(){
 //Get the current line number (data number)
 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]);
}



Related articles: