jqgrid-2动态改变列编辑属性

来源:互联网 发布:医生赚钱软件 编辑:程序博客网 时间:2024/05/18 01:56
  1. JqGrid 的列属性见链接:http://www.qinbin.me/jquery-colmodel-property-description
  2. editType是列的编辑属性,可为text、textarea,select、checkbox、password、button、image、file等。
    更详细的编辑属性见:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype

 3、一般在一列中只能设置一种编辑属性,这里介绍的是动态修改列属性,使用户在点击单元格    时,在一列出 现不同的编辑属性

 4、解决思路: 
   使用onCellSelect方法:在点击单元格时,保存上一行的值,然后根据不同需求设置单元格的    列属性  
   包括onCellSelect等一些的方法链接:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events
     定义变量:varpreCellID;
   onCellSelect :function(id){xs
     $(this).saveRow(preCellID,true);//保存上一行的值
      if(id&&id!=preCellID){ preCellID=id }//将当前行赋值给preCellID
                 //下面就是根据需求动态改变单元格的editType属性
    // 可以根据id获得行的值,然后根据这一行的某个值判断应该显示什么编辑属性 
    //  假设这个值是strType,设置的列名是:paranValue
     if(strType==1){   //代表这一行显示下拉框 select
       $("#editGrid").setColProp("paranValue",{
            editType:select,
            editOptions:getSelectvalue(条件),//根据条件动态获取下拉框的值
            formatter:"select" //这个属性的作用很大,详细介绍               见:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
         }) ;  
      $(this).editRow(id,true) ;//这个设置是使行进入编辑状态,与前面                                         // 的 $(this).saveRow(preCellID,true)对应, 
  }if(strType==2){
         $("#editGrid").setColProp("paranValue",{
            editTYpe:checkbox,
            editOptions:{value:“ON:OFF”},
            formatter:"text" //以文本形式显示,即显示在界面上的值是ON或OFF      
           }
     $(this).editRow(id,true) 
   if(strType==3){ //在editType为text的情况下,添加时间控件datetimepiker
         $("#editGrid").setColProp("paranValue",{
            editType:text,         
            formatter:"text"    
           }
     $(this).editRow(id,true,functionpickdates(id){
        jQuery("#"+id+"_paramValue","editGrid").datetimepiker({
                dateFormate:"yy-mm-dd",//格式化日期
                timeFormate:"HH:mm:ss"//格式化时间
               })
    //关于时间控件见:http://trentrichardson.com/examples/timepicker/
     //             JQuery官网:http://jqueryui.com/demos/
     }) 
    }if(strType==4){ //在editType为text的情况下,添加数字控件spinner
         $("#editGrid").setColProp("paranValue",{
            editType:text,         
            formatter:"text"    
           }
     $(this).editRow(id,true,functionSpinner(id){
        jQuery("#"+id+"_paramValue","editGrid").spinner({
          //可以对spinner的输入值做限制,见 JQuery官网:http://jqueryui.com/demos/ Spinner属性
               })  
    //这里只选了 时间控件和数字控件做例子,对于JQuery控件,以type=text的控件,       都可以用上述方法嵌套在jqGrid表格的单元格中              
      })
1、如果需要在JqGrid单元格显示编辑模式为password,button,textarea,也是以同样的方式,  修改列的editType;(上一节介绍的是我自己需要的几种编辑模式,也是比较常用的几种编辑   模式)

2、在保存数据也有很重要的一点:
  为了确保数据能够保存到界面,最好在保存数据前,将formatter:"text"即:
  $("editGrid").setColProp("paramValue(列名)",{formatter:"text"})
  //这里主要是在动态改变editType时,在设置下拉框时,formatter:select,在使用saveRow //会出现数据不能保存到界面的情况,这解决了下拉框值在特定情况下不能保存的问题

3、点击表格第一列的checkbox时,会触发onCellSelect事件,这样在这个事件中的处理会使      editype为select,checkbox的值处于编辑模式,并会保存值到界面,为了使用户看不到这中间  的变化,在onselectRow方法中做处理
  onSelectRow: function(id){
      $("editGrid").setColProp("paramValue(列名)",{formatter:"text"}) 
     jQuery("editGrid").jqgrid("restoreRow",preCellID);
   restoreRow详解:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing    
  } 
  //1、在点击第一列的checkbox,先触发onCellSelect事件,再触发onSelectRow事件
  //2、restoreRow方法是数据恢复到以前的值,这个方法刚好可以使上述编辑类型的值恢复到 
  //   前的值,即在没有值的情况下,显示为空,有值则显示原值

原创粉丝点击