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

复制代码 代码如下:

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

时间： 2024-09-14 00:16:38

JQGrid的用法解析(列编辑,添加行,删除行)_jquery的相关文章

sql中的 where 、group by 和 having 用法解析

废话不多说了,直接给大家贴代码了,具体代码如下所示: --sql中的 where .group by 和 having 用法解析 --如果要用到group by 一般用到的就是"每这个字" 例如说明现在有一个这样的表:每个部门有多少人 就要用到分组的技术 select DepartmentID as '部门名称',COUNT(*) as '个数' from BasicDepartment group by DepartmentID --这个就是使用了group by +字段 进行了分组

datagridview-C# DataGridView列编辑控件显示问题

问题描述 C# DataGridView列编辑控件显示问题 各位高手, 我在调整界面布局时,遇到这样一个问题, 在datagridView中有一个日期列,一个数字列,当我分别点击该列,会分别出现一个dateTimePicker, NumbericUpDown控件进行编辑. 我调整布局,将该dataGridView放入一个TableLayoutPanel后,这两个编辑控件就不出来了.不知何原因,寻求帮助,谢谢! 下面是代码 private void dataGridView_CellDoubleC

Thinkphp 中 distinct 的用法解析_php实例

TP中distinct()的用处主要是去除重复的值 在Thinkphp手册中也详细说明了(链接:http://document.thinkphp.cn/manual_3_2.html) 下面是我的个人例子: 显示的是这样的 在加入distinct的话: 显示结果为 下面为贴出来的代码 $offernum = M('offer')->distinct(true)->where('order_id='.$order_id)->field('user_id,number')->selec

Java Thread多线程详解及用法解析_java

最全面的java多线程用法解析,如果你对Java的多线程机制并没有深入的研究,那么本文可以帮助你更透彻地理解Java多线程的原理以及使用方法. 1.创建线程 在Java中创建线程有两种方法:使用Thread类和使用Runnable接口.在使用Runnable接口时需要建立一个Thread实例.因此,无论是通过Thread类还是Runnable接口建立线程,都必须建立Thread类或它的子类的实例.Thread构造函数: public Thread( ); public Thread(Runnab

Thinkphp 中 distinct 的用法解析

TP中distinct()的用处主要是去除重复的值 在Thinkphp手册中也详细说明了(链接:http://document.thinkphp.cn/manual_3_2.html#distinct) 下面是我的个人例子: 显示的是这样的 在加入distinct的话: 显示结果为 下面为贴出来的代码 $offernum = M('offer')->distinct(true)->where('order_id='.$order_id)->field('user_id,number')-

Android Retrofit源码的具体用法解析

简介 Retrofit 是 Square 推出的 HTTP 框架,主要用于 Android 和 Java.Retrofit 将网络请求变成方法的调用,使用起来非常简洁方便.本文先简要介绍一下 Retrofit 的用法,然后具体分析其源码执行的流程. 基本用法 Retrofit 把HTTP API 变成 Java 的接口.下面是 Retrofit 官网的一个例子: public interface GitHubService {    @GET("users/{user}/repos")

Swift数组详细用法解析_Swift

一.说明 Swift数组中的类型必须一致,这一点与OC不同 // 数组初始化 var numbers = [0,1,2,3,4,5] var vowels = ["A","E","I","O","U"] // 数组的类型: [Int] 或者 Array<Int> //var numbers: [Int] = [0,1,2,3,4,5] //var numbers: Array<Int>

使用WordPress发送电子邮件的相关PHP函数用法解析_php技巧

wp_mail() 函数用来发送邮件,类似于 PHP 的 mail() 函数. 默认的发件人名称是 WordPress,发件人邮箱是类似 wordpress@example.com.用法 wp_mail( $to, $subject, $message, $headers, $attachments ); 参数 $to (字符串 | 数组)(必须)收件人.多个收件人可以使用数组或者以逗号分隔邮箱的字符串. 默认值:None $subject (字符串)(必须)邮件标题. 默认值:None $me

sql中的group by和having 用法解析

先先group by -- Group By语句从英文的字面意义上理解就是"根据(by)一定的规则进行分组(Group)". --它的作用是通过一定的规则将一个数据集划分成若干个小的区域,然后针对若干个小区域进行数据处理. --注意:group by 是先排序后分组: --举例子说明:如果要用到group by 一般用到的就是"每这个字" 例如说明现在有一个这样的表:每个部门有多少人 就要用到分组的技术  代码如下 复制代码 select DepartmentID