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


Posted in Javascript onNovember 08, 2013
<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]);
}
JQGrid的用法解析(列编辑,添加行,删除行)
JQGrid的用法解析(列编辑,添加行,删除行)
Javascript 相关文章推荐
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
js实现倒计时关键代码
May 05 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
vue实现简单的日历效果
Sep 24 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 #Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 #Javascript
JavaScript中this的使用详解
Nov 08 #Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 #Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 #Javascript
原生js做的手风琴效果的导航菜单
Nov 08 #Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 #Javascript
You might like
利用PHP创建动态图像
2006/10/09 PHP
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
YII中assets的使用示例
2014/07/31 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python3数字求和的实例
2019/02/19 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
中秋客户感谢信
2015/01/22 职场文书
汽车车尾标语大全
2015/08/11 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书