jqgrid 编辑添加功能详细解析

ColModel 是jqGrid里最重要的一个属性，设置表格列的属性。

用法：

Java代码 ：

代码如下:

jQuery("#gridid").jqGrid({   
...   
   colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],   
..   
});  

属性  数据类型  备注  默认值  
align  string  定义单元格对齐方式；可选值：left, center, right.  left  
classes  string  设置列的css。多个class之间用空格分隔，如：'class1 class2' 。表格默认的css属性是ui-ellipsis  empty string  
datefmt  string  对日期列进行格式化。”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日.  ISO Date (Y-m-d)  
defval  string  查询字段的默认值  空  
editable  boolean  单元格是否可编辑  false  
editoptions  array  对列进行编辑时设置的一些属性  empty array  
editrules  array  对于可编辑单元格的一些额外属性设置  empty array  
edittype  string  可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.  text  
fixed  boolean  列宽度是否要固定不可变  false  
formoptions  array  对于form进行编辑时的属性设置  empty  
formatoptions  array  对某些列进行格式化的设置  none  
formatter  mixed  对列进行格式化时设置的函数名或者类型  none  
hidedlg  boolean  是否显示或者隐藏此列  false  
hidden  boolean  在初始化表格时是否要隐藏此列  false  
index  string  当排序时定义排序字段名称的索引，参数名为sidx  empty string  
jsonmap  string  定义了返回的json数据映射  none  
key  boolean  当从服务器端返回的数据中没有id时，将此作为唯一rowid使用，默认只能有一个id属性  false  
label  string  如果colNames为空则用此值来作为列的显示名称，如果都没有设置则使用name 值  none  
name  string  必输项，表格列的名称，所有关键字，保留字都不能作为名称使用包括subgrid, cb and rn.  Required  
resizable  boolean  是否可以被resizable  true  
search  boolean  在搜索模式下，定义此列是否可以作为搜索列  true  
searchoptions  array  设置搜索参数  empty  
sortable  boolean  是否可排序  true  
sorttype  string  用在当datatype为local时，定义搜索列的类型，可选值：int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本  text  
stype  string  定义搜索元素的类型  text  
surl  string  搜索数据时的url  empty string  
width  number  默认列的宽度，只能是象素值，不能是百分比  150  
xmlmap  string  定义当前列跟返回的xml数据之间的映射关系  none  
unformat  function  ‘unformat'单元格值  null 

源码中添加

代码如下:

editurl:'index.php?do=do_edit',
     addurl:'index.php?do=do_add',
                    datatype: 'xml',
                    mtype: 'GET',
                    colNames:['ID', '任务名称', '所属类'
                    colModel :[
                        {name:'taskid', index:'taskid', width:100,align:'center',searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
      {name:'taskname', index:'taskname', width:100, align:'center',editable:true},
      {name:'classid', index:'classid', width:100, align:'center',editable:true,edittype:'select',editoptions: {
       value: '1:事务;2:非事务'},editselected:'classid' },

                    ],

添加editable后 添加也是同样有效的；

搜索
eq 等于( = )
ne 不等于( <> )
lt 小于( < )
le 小于等于( <= )
gt 大于( > )
ge 大于等于( >= )
bw 开始于 ( LIKE val% )
bn 不开始于 ( not like val%)
in 在内 ( in ())
ni 不在内( not in ())
ew 结束于 (LIKE %val )
en 不结束于
cn 包含 (LIKE %val% )
nc 不包含

    

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

    来源: 互联网  发布时间: 2013-12-24

代码如下:

<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='选择' οnclick='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='选择' οnclick='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]);
}

    

[3]jQuery 获取和设置select下拉框的值实现代码

    来源: 互联网  发布时间: 2013-12-24

获取Select ：

获取select 选中的 text :

$("#ddlRegType").find("option:selected").text();

获取select选中的 value:

$("#ddlRegType ").val();

获取select选中的索引:

$("#ddlRegType ").get(0).selectedIndex;

设置select：

设置select 选中的索引：

$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value：

    $("#ddlRegType ").attr("value","Normal“);

    $("#ddlRegType ").val("Normal");

    $("#ddlRegType ").get(0).value = value;

设置select 选中的text:

var count=$("#ddlRegType option").length;

  for(var i=0;i<count;i++)  
     {           if($("#ddlRegType ").get(0).options[i].text == text)  
        {  
            $("#ddlRegType ").get(0).options[i].selected = true;  

            break;  
        }  
    }

$("#select_id option[text='jQuery']").attr("selected", true);

设置select option项:

 $("#select_id").append("<option value='Value'>Text</option>");  //添加一项option

 $("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option

 $("#select_id option:last").remove(); //删除索引值最大的Option

 $("#select_id option[index='0']").remove();//删除索引值为0的Option

 $("#select_id option[value='3']").remove(); //删除值为3的Option

 $("#select_id option[text='4']").remove(); //删除TEXT值为4的Option
 

清空 Select:

$("#ddlRegType ").empty();