当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JQGrid的用法解析(列编辑,添加行,删除行)

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

2018年12月11日  | 移动技术网IT编程  | 我要评论

代码如下:


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


您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网