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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 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
多重?l件?合查?(二)
2006/10/09 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP.vs.JAVA
2016/04/29 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
python写入中英文字符串到文件的方法
2015/05/06 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
Python操作Excel的学习笔记
2021/02/18 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
六一儿童节标语
2014/10/08 职场文书
2015年政风行风工作总结
2015/04/21 职场文书