JQGRID格式化/合并单元格/滚动条问题和多重子表介绍及datepicker参数使用详解(jqgrid表格中应用)

最新推荐文章于 2020-06-15 13:52:06 发布
最新推荐文章于 2020-06-15 13:52:06 发布
阅读量5.1k 收藏 1
点赞数
分类专栏： web

jqgrid格式化字符串（整型、数字、货币、日期、显示连接）

jqGrid的格式化是定义在语言包中的JS中的,有如下已定义好的类型
formatter : { 

     integer : {thousandsSeparator: " ", defaultValue: '0'}, 

      number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'}, 

      currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'}, 

      date : { 

        dayNames: [ 

          "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat", 

          "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" 

       ], 

        monthNames: [ 

          "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", 

         "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" 

        ], 

        AmPm : ["am","pm","AM","PM"], 

        S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'}, 

        srcformat: 'Y-m-d', 

        newformat: 'd/m/Y', 

        masks : { 

         ISO8601Long:"Y-m-d H:i:s", 

         ISO8601Short:"Y-m-d", 

          ShortDate: "n/j/Y", 

         LongDate: "l, F d, Y", 

          FullDateTime: "l, F d, Y g:i:s A", 

          MonthDay: "F d", 

         ShortTime: "g:i A", 

          LongTime: "g:i:s A", 

         SortableDateTime: "Y-m-d\\TH:i:s", 

          UniversalSortableDateTime: "Y-m-d H:i:sO", 

          YearMonth: "F, Y" 
       }, 

        reformatAfterEdit : false 

      }, 

      baseLinkUrl: '', 

      showAction: '', 

     target: '', 

      checkbox : {disabled:true}, 

     idName : 'id' 

   } 

 

Formatter Options 

格式化选项对特定的列定义，覆盖缺省值。这是通过使用colMode的formatoptions阵列

示例： 

colModel : [ 

... 

{name:"myname"... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: " ", 

decimalPlaces: 2, prefix: "$ "}}, 

... 

] 

formatter类型为：货币 。

小数分隔符为， 千位分隔符为 空格   小数位数为 2  前缀为$ 

类型

Options

integer

{thousandsSeparator: " ", defaulValue: 0}

number

{decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaulValue: 0}

currency

{decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaulValue: 0}

date

{srcformat: 'Y-m-d',newformat: 'd/m/Y'}

showlink

{baseLinkUrl: '',showAction: 'show'}

 

日期：formatter:'date',sorttype:'date',editrules:{date:true},search:false,editable:false,formatoptions: {srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'},datefmt:'Y-m-d H:i:s'

 

1.简单格式化列为某种类型
比如:
colModel : [ 
    ... 
       {name:'myname', ... formatter:'number', ...}, 
]
此实例是对名为“myname”的列进行格式化，格式化类是“number”，假如初始值为“1234.1”则格式化后显示为“1 234.10” 。
如果给某列进行格式化：
jQuery("#grid_id").jqGrid({ 

... 

   colModel : [ 
   ... 
      {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } , 

   ... 
  ], 

select类型的格式化实例：
原始数据
jQuery("#grid_id").jqGrid({ 
 ... 
    colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ], 
 ...
 });

使用格式化后

jQuery("#grid_id").jqGrid({ 
... 
   colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ] 
... 
});

结果是，表格的数据值为1或者2但是现实的是One或者Two。

对超链接使用select类型的格式化：
jQuery("#grid_id").jqGrid({ 
... 
 colModel: [ {name:'myname', edittype:'select', formatter:'select', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...}  
      ...  
   ] 
 ... 
});

2.自定义格式列为某种类型
数据的反格式化跟格式化用法相似.
jQuery("#grid_id").jqGrid({ 
... 
  colModel: [  
    ...  
    {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency}, 
    ... 
   ] 
... 
 }); 

//cellvalue：要被格式化的值
//options：对数据进行格式化时的参数设置，格式为：{ rowId: rid, colModel: cm}
//rowObject：行数据
function currencyFmatter (cellvalue, options, rowObject) 
{
 return "$"+cellvalue; 
} 

function  unformatCurrency (cellvalue, options) 
{ 
 return cellvalue.replace("$",""); 
} 
表格中数据实际值为123.00，但是显示的是$123.00; 我们使用getRowData ，getCell 方法取得的值是123.00。

创建通用的格式化函数如下:
<script type="text/javascript"> 
jQuery.extend($.fn.fmatter , { 
    currencyFmatter : function(cellvalue, options, rowdata) { 
   return "$"+cellvalue; 
} 
}); 

jQuery.extend($.fn.fmatter.currencyFmatter , { 
    unformat : function(cellvalue, options) { 
    return cellvalue.replace("$",""); 
} 
}); 
</script>

现在介绍在单元格中自定义格式化超链接
function linkFmatter(cellvalue, options, rowObject) 
{
   if(cellvalue == undifne || cellvalue.length == 0)
   {
       return "";
   }

   var link = "<a href='#'>"+ cellvalue +"</a>"
   return link; 
} 

function  unformatLink(cellvalue, options) 
{ 
   return cellvalue;//注意这里直接返回就行了,但在列定义时不使用此方法会超链接的HTML元素. 
}

另一种方法:showlink这个是格式类型
showlink  {baseLinkUrl: '',showAction: 'show'}
即formatter:'showlink', formatoptions{baseLinkUrl: '这儿是URL',showAction: 'show'}--取数据时是否是未格式化的数据待验证.
 


3.自定义列编辑时的校验规则
定义列时:
{name:'age', index:'age', width:180, align:'center',editable:true,editrules:{custom:true,custom_func:valiAge}},
在JS中定义方法如下:
 function valiAge(value,colname) { 
        if (value < 0 || value >120) { 
           return [false,"请填写0-120之间的数字!"]; 
        } 
        else { 
           return [true,"ok"]; 
        } 
}

 

jqGrid是非常强大的，除了上一讲提到的预置的格式化外，还提供自定义的格式化方法，这种方法也是我比较喜欢的方法。
我们接上面的例子

<span class="pln" style="color:#000000;">$</span><span class="pun" style="color:#66660;">(</span><span class="str" style="color:#0880;">"#grid_id"</span><span class="pun" style="color:#66660;">).</span><span class="pln" style="color:#000000;">jqGrid</span><span class="pun" style="color:#66660;">({</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;">
   colModel </span><span class="pun" style="color:#66660;">:</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">[</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">{</span><span class="pln" style="color:#000000;">name</span><span class="pun" style="color:#66660;">:</span><span class="str" style="color:#0880;">'sex'</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> edittype</span><span class="pun" style="color:#66660;">:</span><span class="str" style="color:#0880;">'select'</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> editoptions</span><span class="pun" style="color:#66660;">:{</span><span class="pln" style="color:#000000;">value</span><span class="pun" style="color:#66660;">:</span><span class="str" style="color:#0880;">"1:男;2:女"</span><span class="pun" style="color:#66660;">}}</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">],</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">});</span>

此时，我们增加格式化

<span class="pln" style="color:#000000;">$</span><span class="pun" style="color:#66660;">(</span><span class="str" style="color:#0880;">"#grid_id"</span><span class="pun" style="color:#66660;">).</span><span class="pln" style="color:#000000;">jqGrid</span><span class="pun" style="color:#66660;">({</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;">
   colModel </span><span class="pun" style="color:#66660;">:</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">[</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">{</span><span class="pln" style="color:#000000;">name</span><span class="pun" style="color:#66660;">:</span><span class="str" style="color:#0880;">'sex'</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> edittype</span><span class="pun" style="color:#66660;">:</span><span class="str" style="color:#0880;">'select'</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> editoptions</span><span class="pun" style="color:#66660;">:{</span><span class="pln" style="color:#000000;">value</span><span class="pun" style="color:#66660;">:</span><span class="str" style="color:#0880;">"1:男;2:女"</span><span class="pun" style="color:#66660;">}},</span><span class="pln" style="color:#000000;">formatter</span><span class="pun" style="color:#66660;">:</span><span class="kwd" style="color:#0088;">function</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">cellvalue</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> options</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> row</span><span class="pun" style="color:#66660;">){</span><span class="pln" style="color:#000000;">
     </span><span class="kwd" style="color:#0088;">if</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">cellvalue</span><span class="pun" style="color:#66660;">==</span><span class="lit" style="color:#06666;">1</span><span class="pun" style="color:#66660;">){</span><span class="pln" style="color:#000000;">
         </span><span class="kwd" style="color:#0088;">return</span><span class="pln" style="color:#000000;"> </span><span class="str" style="color:#0880;">"男"</span><span class="pun" style="color:#66660;">;</span><span class="pln" style="color:#000000;">
    </span><span class="pun" style="color:#66660;">}</span><span class="kwd" style="color:#0088;">else</span><span class="pun" style="color:#66660;">{</span><span class="pln" style="color:#000000;">
        </span><span class="kwd" style="color:#0088;">return</span><span class="pln" style="color:#000000;"> </span><span class="str" style="color:#0880;">"女"</span><span class="pun" style="color:#66660;">;</span><span class="pln" style="color:#000000;">
   </span><span class="pun" style="color:#66660;">}</span><span class="pln" style="color:#000000;">
   </span><span class="pun" style="color:#66660;">}</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">],</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">});</span>

这样操作起来就比较方便。我们也可以把这个方法独立出来，例如：我们在数据库设置的时候常用1来标示“是”，0标示“否”，这时候我们前台展示的时候肯定不能只显示1或者0，于是必须转换，如果比较多字段用到，我们就采用独立出来写一个。

<span class="kwd" style="color:#0088;">function</span><span class="pln" style="color:#000000;"> sexFmatter</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">cellvalue</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> options</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> rowObject</span><span class="pun" style="color:#66660;">){</span><span class="pln" style="color:#000000;">
         </span><span class="kwd" style="color:#0088;">if</span><span class="pun" style="color:#66660;">(</span><span class="pln" style="color:#000000;">cellvalue</span><span class="pun" style="color:#66660;">==</span><span class="lit" style="color:#06666;">1</span><span class="pun" style="color:#66660;">){</span><span class="pln" style="color:#000000;">
         </span><span class="kwd" style="color:#0088;">return</span><span class="pln" style="color:#000000;"> </span><span class="str" style="color:#0880;">"男"</span><span class="pun" style="color:#66660;">;</span><span class="pln" style="color:#000000;">
    </span><span class="pun" style="color:#66660;">}</span><span class="kwd" style="color:#0088;">else</span><span class="pun" style="color:#66660;">{</span><span class="pln" style="color:#000000;">
        </span><span class="kwd" style="color:#0088;">return</span><span class="pln" style="color:#000000;"> </span><span class="str" style="color:#0880;">"女"</span><span class="pun" style="color:#66660;">;</span><span class="pln" style="color:#000000;">
   </span><span class="pun" style="color:#66660;">}</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">}</span>

在formatter属性后面填写方法名

<span class="pln" style="color:#000000;">$</span><span class="pun" style="color:#66660;">(</span><span class="str" style="color:#0880;">"#grid_id"</span><span class="pun" style="color:#66660;">).</span><span class="pln" style="color:#000000;">jqGrid</span><span class="pun" style="color:#66660;">({</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;">
   colModel </span><span class="pun" style="color:#66660;">:</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">[</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">{</span><span class="pln" style="color:#000000;">name</span><span class="pun" style="color:#66660;">:</span><span class="str" style="color:#0880;">'sex'</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> edittype</span><span class="pun" style="color:#66660;">:</span><span class="str" style="color:#0880;">'select'</span><span class="pun" style="color:#66660;">,</span><span class="pln" style="color:#000000;"> editoptions</span><span class="pun" style="color:#66660;">:{</span><span class="pln" style="color:#000000;">value</span><span class="pun" style="color:#66660;">:</span><span class="str" style="color:#0880;">"1:男;2:女"</span><span class="pun" style="color:#66660;">}},</span><span class="pln" style="color:#000000;">formatter</span><span class="pun" style="color:#66660;">:</span><span class="pln" style="color:#000000;"> sexFmatter</span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#66660;">],</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">...</span><span class="pln" style="color:#000000;">
</span><span class="pun" style="color:#66660;">});</span>

 jqgrid批量增加/删除数据性能问题


1。增加：
$jqgrid.jqGrid("addRowData", newrowid, dataRow, "first");  

如果用以上方法循环增加数据有性能问题。而批量插入（dataRow这个是集合则插入数据的ROWID不能指定都是一样的）。
所以最好用addJSONData方法：
使用传来的data数据填充表格。使用方法：
var mygrid = jQuery(”#”+grid_id)[0];
var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid);
myjsongrid = null;
jsonresponse =null;

其中myjsongrid可以ACTION传到页面的JSON数据集合，
jsonReader: { 
            root:"datas",      
            records: "record",       
            repeatitems : false     
        }, 
如果定义表格时使用了以上数据定义，则从ACTION得到的JSON数据集合LIST，
需要组装一下：
var tableData = {};
tableData["datas"] = LIST;当然其它信息也可以设置。
mygrid.addJSONData(tableData);
还有datatype: "json",  也要改成：datatype:function(){}, 

 

2。删除
$jqgrid.jqGrid("delRowData", rowid);
 如果用以上方法循环(注意要从最大行ID开始删除)删除数据有性能问题。
使用以下方法：--此方法不会触发表格方法gridComplete（如果更新变化的表格序号需要自已定个方法实现）

var ids=$jqgrid.jqGrid("getGridParam", "selarrrow");
var idsL = ids.length ;  
            for(var i =0 ; i<idsL ; i++){  
                $jqgrid.find("tr[id="+ids[i]+"]").remove();  
                //删除当前删除行的编号  
                newrowids.remove(ids[i]);  
            }  

jqGrid滚动条问题

1.$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'hidden' });

2.autoScroll: true,---定义表格参数值

3.jqgrid保持显示垂直滚动条在IE中记录比较少的时候，默认情况下不显示垂直滚动条，会出现标题行与数据行位置对不 齐的情况，通过保持显示垂直滚动条可以解决这个问题。
$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
需要保持水平滚动条，则：
$( pGridId ).closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'scroll' });

4。jqgrid在IE使用水平滚动条BUG
  if (jQuery.browser.msie) {
    $a = jQuery('.ui-jqgrid .ui-jqgrid-bdiv');
    $a.css('padding', '0 0 15px 0');
      var myheight = jQuery('#tableID').jqGrid('getGridParam','height');
    if( myheight   == '100%'){
        $a.css('overflow-y', 'hidden');
    }
    }

5。由于需要显示的列比较多，设定了控件的宽度width:"800"，但是列的总宽度肯定大于800所以需要出现水平滚动条来显示
width:800px;overflow-x:scroll;overflow-y:hidden;

 

 

jqGrid显示数据,属性,多重表头,子表,行编辑,单元格编辑等

转自:http://blog.csdn.net/lc25329234/article/details/7894382


JavaScipt代码:

<script type="text/javascript"> 
var lastsel3; //选择一行进行编辑时用到的
$(function(){ 
  $("#list").jqGrid({
	    url:'studentShow_do.jsp',
	    datatype: 'json',
	    mtype: 'post',
	    colNames:['学号','姓名', '年龄','生日'],
	    colModel :[ 
	      {name:'sid', index:'sid', width:155, align:'center',editable:true}, 
	      //edittype 修改时设置编辑框的HTML样式的
	      {name:'sname', index:'sname', width:190, align:'center',editable:true,edittype:'select',editoptions:{value:"1:张三;2:李四;3:王五"}},
	      //行内编辑时自定义的验证valiAge方法中写验证条件 
	      {name:'age', index:'age', width:180, align:'center',editable:true,editrules:{custom:true,custom_func:valiAge}}, 
	      /**对于时间格式的显示formatter:'date'格式化时间和formatoptions:{srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s'} 配合使用,
	       * H:i:s用于显示时分秒,newformat: 'Y-m-d',当Y为小写时 只显示年份的后两位如1988则显示88;m(月),d(日)为大写时则显示英文(简写)的月日;
	       */
	      {name:'brith', index:'brith',formatter:'date',formatoptions:{srcformat: 'Y-m-d', newformat: 'Y-m-d'}, width:250, align:'center',editable:true,sorttype:"date"} 
	    ],
	    //forceFit : true,//调整列宽度
	    pager: '#pager',//定义页码控制条Page Bar,需要一个div
	    rownumbers: true, //如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增(翻页后的值与rowList有关)。此列名为'rn'.
	    rowNum:5, //一页中显示的最大条数,返回条数大于此值时,仍显示此值的条数.
	    rowList:[20,50,100],//一个数组，用于设置Grid可以接受的rowNum值
	    sortname: 'sid',//初始根据哪个列来排序, 当在表格中点击不同的列头,可以实现动态根据某列来排序,将会把点击的列名传到后台来实现根据不同的字段来排序
	    sortable:true, 
	    viewrecords: true, //设置是否在Pager Bar显示所有记录的总数
	    sortorder: 'asc',//排序asc or desc
	    prmNames:{page:'page',rows:'rows',totalrows:'totalrows',sort:"sidx"},//设置默认传到后台的参数名称
	    loadtext:'等等',
	    height: '80%',
	    altRow:true,
	    multiselect: true,	//是否显示多选框
	    multiboxonly: false, //是否只有点击多选框时,才执行选择多选框checkbox.默认为false,点击一行亦选定此行的多选框
	    multiselectWidth: 50, //多选框所在列的宽度
	    page:1,//初始显示第几页
	    //cellEdit: true,//与colModel中editable属性配合使用,当editable:true,cellEdit:true时可以对editable:true的列进行单个单元格编辑,cellEdit:false时(colModel中所有列editable都为true时)整行编辑
	    editurl:'ok.jsp',//编辑栏编辑后发送的地址(整行)
	    cellurl:'ok.jsp',//单元格的发送地址
	   	gridview: true,//构造一行数据后添加到grid中，如果设为true则是将整个表格的数据都构造完成后再添加到grid中，但treeGrid, subGrid, or afterInsertRow 不能用
	   	subGrid : true,//开启显示子表的按钮
	    caption: "jqGrid test",
	    subGridRowExpanded: function(subgrid_id,row_id) {//显示子表
	    	var subgrid_table_id = "subgrid_"+subgrid_id;
						$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'></table>"); 
						$("#"+subgrid_table_id).jqGrid({ 
							url:'studentShow_do.jsp',
	    					datatype: 'json',
						    colNames:['学号','姓名', '年龄','生日'],
						    colModel :[ 
						      {name:'sid', index:'sid', width:155, align:'center'}, 
						      {name:'sname', index:'sname', width:190, align:'center'}, 
						      {name:'age', index:'age', width:180, align:'center'}, 
						      {name:'brith', index:'brith', width:250, sortable:false} 
						    ],
						   height: '100%'
					});
    	},
    	
    	onSelectRow	: function(rowid,sid,status){
    		if(rowid && rowid!==lastsel3){//当选中的不是上一次选中的行就(restoreRow)释放(恢复)上一次选中的行,避免选中多行
				jQuery('#list').jqGrid('restoreRow',lastsel3);
				jQuery('#list').jqGrid('editRow',rowid,true,pickdates);
				lastsel3=rowid;
			}else{
				jQuery('#list').jqGrid('editRow',rowid,true,pickdates);
				lastsel3=rowid;
			}
    	},
    	loadComplete: function(){ 
    		//alert("s");
    	}
  	});
  	//多重表头
  	//顶级表头
	jQuery("#list").jqGrid('setGroupHeaders', {
		useColSpanStyle: false, //没有表头的列是否与表头列位置的空单元格合并
		groupHeaders:[
			//合并 startColumnName(开始列),以sid列开始; numberOfColumns(合并几列),合并2列; titleText(合并后父列名),合并后父列名为All Student
			{startColumnName: 'sid', numberOfColumns: 4, titleText: 'All Student Info'}
		]	
	});
	//二级表头
	jQuery("#list").jqGrid('setGroupHeaders', {
		useColSpanStyle: false, //没有表头的列是否与表头列位置的空单元格合并
		groupHeaders:[
			//合并 startColumnName(开始列),以sid列开始; numberOfColumns(合并几列),合并2列; titleText(合并后父列名),合并后父列名为All Student
			{startColumnName: 'sid', numberOfColumns: 3, titleText: 'Base Student Info'},
			{startColumnName: 'brith', numberOfColumns: 2, titleText: 'other'}
		]
	});
	jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true});
	//$("#list").jqGrid('inlineNav','#pager');//行内编辑 (或与单元格编辑(选择) 引冲突)
 	//对话框
 	$("#dialog").dialog({
		autoOpen: false,
		show: "blind",
		hide: "explode"
	});
});

function pickdates(rowid){
	$("#"+rowid+"_brith","#list").datepicker({dateFormat:"yy-mm-dd"});//时间控件
}
 function valiAge(value,colname) {
        if (value < 0 || value >120) {
           return [false,"请填写0-120之间的数字!"];
		}
        else {
           return [true,"ok"];
		}
}
</script>


 

HTML代码

  
<body>
    <table id="list" border="1"></table>
	<div id="pager"></div>
	<div id="dialog" title="Basic dialog">
		<p>展示所有学生信息</p>
	</div>
  </body>



 

Jquery jqgrid的subGrid子表格详解示例

转自:http://blog.csdn.net/akemt/article/details/44056591

 jqgrid行上嵌套子表格的技术分析。

jqGrid的一项高级功能就是嵌套子表格，使用起来也非常简单。使用的方式有两种：
使用普通的subGrid子表格；
使用一个完整jqGrid作为子表格；
1.选项含义
使用子表格，涉及到jqGrid的三个选项：
subGrid ：首先必须将jqGrid的subGrid选项设置为true，默认为false；当此项设为true的时候，Grid表格的最左边将会添加一列，里面有一个“+”图标，用于展开子格；
subGridRowExpanded ：当点击“+”展开子表格时，将触发此选项定义的事件方法；
subGridRowColapsed ：当点击“-”收起子表格时，将触发此选项定义的事件方法；
注1 ：subGridRowExpanded定义的事件方法函数将会得到两个参数：
subgrid_id ：子表格的id；当子表格展开的时候，在主表格中会创建一个div元素用来容纳子表格，subgrid_id就是这个div的id。
row_id ：主表格中所要展开子表格的行的id。

注2 ：在subGridRowExpanded定义的事件方法函数中，即可根据以上两个参数，创建新的jqGrid对象，其中的options选项可参考主表格的jqGrid选项来运用。可以理解为在主表格中在嵌套一个新的jqGrid对象。当然，在subGridRowExpanded定义的事件函数中，也不一定非得嵌套一个新的jqGrid到主表格，可以将其放置于任何自己希望的位置，甚至做些别的操作，根本不去里理会子表格，比如使用$.ajax()向 Server发送ajax请求，并根据返回的json，做些自定义的操作。
2.js代码使用示例：（ 主要代码为标红处）
//刷新页面
function flashPage() {
//判断是否是初始化
if(initFlag){
$("#StartOprateTime").val(formatDate("end"));
$("#EndOprateTime").val(formatDate("end"));
}
initFlag=false;
$("#dictlist").empty();
$("#dictlist").append('
');
//列表
var jq = jQuery("#list4").jqGrid({
     url: "${pageContext.request.contextPath}/account_DayAccountSearchControll er/getDaySearchListControll er.json",
   datatype: "json",
   colNames:['CUSTNO','客户名称','昨日余额','入账总金额','出账总金额','余额','日结日期'],
   colModel:[
   {name:'CUSTNO',index:'CUSTNO', sortable:false,align:"center",hidden : true},
   {name:'CUST_NAME',index:'CUST_NAME',sortable:false,width:200},
   {name:'LASTBALANCE',index:'LASTBALANCE', sortable:false,width:160,align:"right"},
   {name:'INACCOUNT',index:'INACCOUNT', sortable:false,width:160,align:"right"}, 
   {name:'OUTACCOUNT',index:'OUTACCOUNT',sortable:false,width:160,align:"right"},
   {name:'BALANCE',index:'BALANCE',sortable:false,width:160,align:"right"},
   {name:'ENDDATE',index:'ENDDATE', sortable:false,width:80,align:"center"}
   ],
rownumbers: true, //设置列表显示序号,需要注意在colModel中不能使用rn作为index    
     multiselect: false, //多选框    
     multiboxonly: true, //在点击表格row时只支持单选，只有当点击checkbox时才多选，需要multiselect=true是有效    
   postData:{ 
CUST_NO :$("#CUST_NO").val(),
StartOprateTime : $("#StartOprateTime").val(),
EndOprateTime : $("#EndOprateTime").val()
},
   jsonReader: {
   repeatitems : false
   },
   pager: "pager2", //翻页
   rowNum: 20, //条数
rowList: [10,20,30,50,100], //可选值
viewrecords: true, //显示记录数
   autowidth: true, //表宽自动调整
   shrinkToFit: false, //列宽按比例调整
    subGrid: true,// (1)开启子表格支持
subGridRowExpanded: function(subgrid_id, row_id) {//(2)子表格容器的id和需要展开子表格的行id，将传入此事件函数 
var rowDate = $("#list4").jqGrid('getRowData', row_id);//通过索引获取当前行对象
strCustNo = rowDate.CUSTNO;
strEndDay = rowDate.ENDDATE;
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";//(3)根据subgrid_id定义对应的子表格的table的id
pager_id = "p_"+subgrid_table_id;//(4)根据subgrid_id定义对应的子表格的pager的id 
// (5)动态添加子表的table和pager  
$("#"+subgrid_id).html(""); 
$("#"+pager_id).html(""); 
可能上边的方法不能动态产生表格的DIV和分页DIV,
需要用下面的方法在当前表格单元格所在DIV(subgrid_id)中增加,如下
var tableDiv = '<table id="'+subgrid_table_id+'"></table>';
var pageDiv = '<div id="'+pager_id+'"></div>';
$("#"+subgrid_id).empty().append(tableDiv);
$("#"+subgrid_id).append(pageDiv);
在子表收起来时subGridRowColapsed事件可以删除相应子表.
$("#"+subgrid_id).empty();

jQuery("#"+subgrid_table_id).jqGrid({// (6)创建jqGrid对象  
url: "${pageContext.request.contextPath}/account_DayAccountSearchController/getDaySearchDetailController.json",//(7)子表格数据对应的url  
  datatype: "json",
colNames:['CUSTNO','客户名称','卷别','昨日余额','入账总金额','出账总金额','余额','日结日期'],
  colModel:[
  {name:'CUSTNO',index:'CUSTNO', sortable:false,align:"center",hidden : true},
  {name:'CUST_NAME',index:'CUST_NAME',sortable:false,width:200,hidden : true},
  {name:'VALUE_KEY_NAME',index:'VALUE_KEY_NAME',sortable:false,width:170},
  {name:'LASTBALANCE',index:'LASTBALANCE', sortable:false,width:160,align:"right"},
  {name:'INACCOUNT',index:'INACCOUNT', sortable:false,width:160,align:"right"}, 
  {name:'OUTACCOUNT',index:'OUTACCOUNT',sortable:false,width:160,align:"right"},
  {name:'BALANCE',index:'BALANCE',sortable:false,width:160,align:"right"},
  {name:'ENDDATE',index:'ENDDATE', sortable:false,width:80,align:"center"}
  ],
  rownumbers: true, //设置列表显示序号,需要注意在colModel中不能使用rn作为index 
  postData:{ 
CUST_NO : strCustNo,
ENDDATE : strEndDay 
},  
               jsonReader: {   // (8)针对子表格的jsonReader设置  
                  // root:"gridModel",  
                 //  records: "record",  
                   repeatitems : false  
               },
  rowNum:5,
  pager: pager_id,
  sortname: 'num',
   sortorder: "asc",
   height: '100%'
});
//jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
}
});
//火狐下初始化自适应
myLayout.resizeAll();
}
对于如何从前台到后台传值取值，代码里都写清楚了。相信IT们都能看懂。
3.参考及demo
http://www.trirand.com/blog/jqgrid/jqgrid.html
>>advanced>>Subgrid /grid as subgrid

 

插件datepicker的参数使用详解

jsp需要引入的文件：
<!-- 日期控件需引入以下2个文件 -->
<script language="javascript" type="text/javascript" src="<c:url value='/plugin/jqueryui/ui/jquery.ui.datepicker.js'/>"></script>
<script language="javascript" type="text/javascript" src="<c:url value='/plugin/jqueryui/ui/i18n/jquery.ui.datepicker-zh-CN.js'/>"></script>

<!-- 时间控件需额外引入以下2文件 -->
<script language="javascript" type="text/javascript" src="<c:url value='/plugin/jqueryui/ui/jquery.ui.slider.js'/>"></script>
<script language="javascript" type="text/javascript" src="<c:url value='/scripts/deviceapplication/jquery.ui.timepicker.addon.js'/>"></script>

jsp中的HTML：
<s:textfield id="startDate" name="startDate" style="width:120px;text-align:right;" cssClass="text" >
  <s:param name="value" ><s:date name="startDate" format="yyyy-MM-dd" /></s:param>
</s:textfield>
—
<s:textfield id="endDate" name="endDate" style="width:120px;text-align:right;" cssClass="text" >
  <s:param name="value" ><s:date name="endDate" format="yyyy-MM-dd" /></s:param>
</s:textfield>

jsp中的JS：
$().ready(function() {
 
$("#startDate").<STRONG><SPAN style="COLOR: #ff0000">datepicker</SPAN></STRONG>({
 regional:"zh-CN",
 formatDate:"yy-mm-dd",//设置日期字符串的显示格式。
 altField:"#endDate",//将选择的日期同步到另一个域中，配合altFormat可以显示不同格式的日期字符串
 altFormat:"yy-mm-dd",//当设置了altField的情况下，显示在另一个域中的日期格式
 appendText:'(yyyy-mm-dd)',//在日期插件的所属域后面添加指定的字符串
 buttonImage: '/images/datepicker.gif',//设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示
 buttonImageOnly:true,//Set to true to place an image after the field to use as the trigger without it appearing on a button
 buttonText:'Choose',//设置触发按钮的文本内容
 changeMonth:true,//设置允许通过下拉框列表选取月份
 changeYear:true,//设置允许通过下拉框列表选取年份
 closeText:"close",//设置关闭按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示
 currentText:"current",//设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
 constrainInput:true,//如果设置为true，则约束当前输入的日期格式
 dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],//设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。
 dayNamesMin:['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],//设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示
 dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],//设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示
 defaultDate:+7,//设置默认加载完后第一次显示时选中的日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')
 duration:"slow",//设置日期控件展开动画的显示时间，可选是"slow", "normal", "fast"，''代表立刻，数字代表毫秒数
 firstDay:1,//设置一周中的第一天。星期天为0，星期一为1，以此类推
 gotoCurrent:true,// 如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天
 hideIfNoPrevNext:false,//设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮。（默认为不可用）
 isRTL:false,// 如果设置为true，则所有文字是从右自左。
 maxDate:+7,//设置一个最大的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。  
 minDate:+1,//设置一个最小的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。  
 monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'],//设置所有月份的名称
 monthNamesShort:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],//设置所有月份的缩写
 navigationAsDateFormat:true,//如果设置为true，则formatDate函数将应用到prevText,nextText和currentText的值中显示，例如显示为月份名称。
 nextText:"下1个月",//设置“下个月”链接的显示文字
 prevText:"上1个月",//设置“上个月”链接的显示文字
 numberOfMonths:2,//设置一次要显示多少个月份。如果为整数则是显示月份的数量，如果是数组，则是显示的行与列的数量
 shortYearCutoff:2,//设置截止年份的值。如果是（0-99）的数字则以当前年份开始算起，如果为字符串，则相应的转为数字后再与当前年份相加。当超过截止年份时，则被认为是上个世纪。
 showAnim:"show",//设置显示、隐藏日期插件的动画的名称
 showOptions:{direction: 'up'),//如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置
 showButtonPanel:true,//设置是否在面板上显示相关的按钮。
 showCurrentAtPos:3,//设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位
 showMonthAfterYear:true,//是否在面板的头部年份后面显示月份
 showOn:"both",//  设置什么事件触发显示日期插件的面板，可选值：focus, button, both  
 showOtherMonths:true,//是否在当前面板显示上、下两个月的一些日期数（不可选）。  
 stepMonths:1,// 当点击上/下一月时，一次翻几个月。
 yearRange:"2010:2020"//控制年份的下拉列表中显示的年份数量，可以是相对当前年(-nn:+nn)，也可以是绝对值(-nnnn:+nnnn) 
});
  
$("#endDate").<STRONG><SPAN style="COLOR: #ff0000">datetimepicker</SPAN></STRONG>({
 timeText: '时间', 
 hourText: '小时', 
 minuteText: '分钟', 
 secondText: '秒', 
 currentText: '现在', 
 closeText: '完成', 
 showSecond: true, //显示秒  
 timeFormat: 'hh:mm:ss'//格式化时间  
});
});

jsp页面效果时间控件：

时间控件：
 

 

日期控件：


 

 

概述  
    日期选择插件是一个配置灵活的插件，你可以定义它的展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。  

    同时，你还可以通过键盘控制它：  
    page up/down - 上一月、下一月  
    ctrl+page up/down - 上一年、下一年   
    ctrl+home - 当前月或最后一次打开的日期  
    ctrl+left/right - 上一天、下一天  
    ctrl+up/down - 上一周、下一周   
    enter - 确定选择日期   
    ctrl+end - 关闭并清除已选择的日期  
    escape - 关闭并取消选择  
     
    实用功能：  
    $.datepicker.setDefaults( settings ) - 全局设置日期选择插件的参数.   
    $.datepicker.formatDate( format, date, settings ) - 格式化显示的日期字符串   
    $.datepicker.iso8601Week( date ) - 给出一个日期，确实他是一年中的第几周   
    $.datepicker.parseDate( format, value, settings ) - 按照指定格式获取日期字符串   
     
    日期格式：  
    d - 每月的第几天 (没有前导零)   
    dd - 每月的第几天 (两位数字)   
    o - 一年中的第几天 (没有前导零)   
    oo - 一年中的第几天 (三位数字)   
    D - day name short   
    DD - day name long   
    m - 月份 (没有前导零)   
    mm - 月份 (两位数字)   
    M - month name short   
    MM - month name long   
    y - 年份 (两位数字)   
    yy - 年份 (四位数字)   
    @ - Unix 时间戳 (从 01/01/1970 开始)   
    '...' - 文本  
    '' - 单引号   
    （其它） - 文本  
     
    其它标准日期格式:   
    ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)   
    COOKIE - 'D, dd M yy'   
    ISO_8601 - 'yy-mm-dd'

    RFC_822 - 'D, d M y' 
    RFC_850 - 'DD, dd-M-y' 
    RFC_1036 - 'D, d M y  
    RFC_1123 - 'D, d M yy' 
    RFC_2822 - 'D, d M yy' 
    RSS - 'D, d M y' 
    TIMESTAMP - '@'   
    W3C - 'yy-mm-dd' 
     
     
    ·参数（参数名 : 参数类型 : 默认值）  
    altField : String : ''   
      将选择的日期同步到另一个域中，配合altFormat可以显示不同格式的日期字符串。  
      初始：$('.selector').datepicker({ altField: '#actualDate' });  
      获取：var altField = $('.selector').datepicker('option', 'altField');  
      设置：$('.selector').datepicker('option', 'altField', '#actualDate');  
     
    altFormat : String : ''   
      当设置了altField的情况下，显示在另一个域中的日期格式。  
      初始：$('.selector').datepicker({ altFormat: 'yy-mm-dd' });  
      获取：var altFormat = $('.selector').datepicker('option', 'altFormat');  
      设置：$('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');  
     
    appendText : String : ''   
      在日期插件的所属域后面添加指定的字符串。  
      初始：$('.selector').datepicker({ appendText: '(yyyy-mm-dd)' });  
      获取：var appendText = $('.selector').datepicker('option', 'appendText');  
      设置：$('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');  
     
    buttonImage : String : ''   
      设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。  
      初始：$('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });  
      获取：var buttonImage = $('.selector').datepicker('option', 'buttonImage');  
      设置：$('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif'); 
     
    buttonImageOnly : Boolean : false   
      Set to true to place an image after the field to use as the trigger without it appearing on a button. 
      初始：$('.selector').datepicker({ buttonImageOnly: true });  
      获取：var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly'); 
      设置：$('.selector').datepicker('option', 'buttonImageOnly', true);  
     
    buttonText : String : '...'   
      设置触发按钮的文本内容。

     初始：$('.selector').datepicker({ buttonText: 'Choose' });  
      获取：var buttonText = $('.selector').datepicker('option', 'buttonText');  
      设置：$('.selector').datepicker('option', 'buttonText', 'Choose');  
     
    changeMonth : Boolean : false 
      设置允许通过下拉框列表选取月份。  
      初始：$('.selector').datepicker({ changeMonth: true });  
      获取：var changeMonth = $('.selector').datepicker('option', 'changeMonth');  
      设置：$('.selector').datepicker('option', 'changeMonth', true);  
     
    changeYear : Boolean : false 
      设置允许通过下拉框列表选取年份。  
      初始：$('.selector').datepicker({ changeYear: true });  
      获取：var changeYear = $('.selector').datepicker('option', 'changeYear');  
      设置：$('.selector').datepicker('option', 'changeYear', true);  
     
    closeTextType: StringDefault: 'Done' 
      设置关闭按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。  
      初始：$('.selector').datepicker({ closeText: 'X' });  
      获取：var closeText = $('.selector').datepicker('option', 'closeText');  
      设置：$('.selector').datepicker('option', 'closeText', 'X');  
     
    constrainInput : Boolean : true 
      如果设置为true，则约束当前输入的日期格式。  
      初始：$('.selector').datepicker({ constrainInput: false });  
      获取：var constrainInput = $('.selector').datepicker('option', 'constrainInput'); 
      设置：$('.selector').datepicker('option', 'constrainInput', false);  
     
    currentText : String : 'Today' 
      设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。  
      初始：$('.selector').datepicker({ currentText: 'Now' });  
      获取：var currentText = $('.selector').datepicker('option', 'currentText');  
      设置：$('.selector').datepicker('option', 'currentText', 'Now');  
     
    dateFormat : String : 'mm/dd/yy'   
      设置日期字符串的显示格式。  
      初始：$('.selector').datepicker({ dateFormat: 'yy-mm-dd' });  
      获取：var dateFormat = $('.selector').datepicker('option', 'dateFormat');  
      设置：$('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');  
     
    dayNames : Array : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 
      设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。

    初始：$('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] }); 
      获取：var dayNames = $('.selector').datepicker('option', 'dayNames');  
      设置：$('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']); 
     
    dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']  
      设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。  
      初始：$('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] }); 
      获取：var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin');  
      设置：$('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']); 
     
    dayNamesShort : Array : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']  
      设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。  
      初始：$('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] }); 
      获取：var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort'); 
      设置：$('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']); 
     
    defaultDate : Date, Number, String : null 
      设置默认加载完后第一次显示时选中的日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 
      初始：$('.selector').datepicker({ defaultDate: +7 });  
      获取：var defaultDate = $('.selector').datepicker('option', 'defaultDate');  
      设置：$('.selector').datepicker('option', 'defaultDate', +7);  
     
    duration : String, Number : 'normal'   
      设置日期控件展开动画的显示时间，可选是"slow", "normal", "fast"，''代表立刻，数字代表毫秒数。  
      初始：$('.selector').datepicker({ duration: 'slow' });  
      获取：var duration = $('.selector').datepicker('option', 'duration');  
      设置：$('.selector').datepicker('option', 'duration', 'slow');  
     
    firstDay : Number : 0  
      设置一周中的第一天。星期天为0，星期一为1，以此类推。  
      初始：$('.selector').datepicker({ firstDay: 1 });  
      获取：var firstDay = $('.selector').datepicker('option', 'firstDay');  
      设置：$('.selector').datepicker('option', 'firstDay', 1);  
     
    gotoCurrent : Boolean : false

    如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。  
      初始：$('.selector').datepicker({ gotoCurrent: true });  
      获取：var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');  
      设置：$('.selector').datepicker('option', 'gotoCurrent', true);  
     
    hideIfNoPrevNext : Boolean : false   
      设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮。（默认为不可用）  
      初始：$('.selector').datepicker({ hideIfNoPrevNext: true });  
      获取：var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext'); 
      设置：$('.selector').datepicker('option', 'hideIfNoPrevNext', true);  
     
    isRTL : Boolean : false   
      如果设置为true，则所有文字是从右自左。  
      初始：$('.selector').datepicker({ isRTL: true });  
      获取：var isRTL = $('.selector').datepicker('option', 'isRTL');  
      设置：$('.selector').datepicker('option', 'isRTL', true);  
     
    maxDate : Date, Number, String : null   
      设置一个最大的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 
      初始：$('.selector').datepicker({ maxDate: '+1m +1w' });  
      获取：var maxDate = $('.selector').datepicker('option', 'maxDate');  
      设置：$('.selector').datepicker('option', 'maxDate', '+1m +1w');  
     
    minDate : Date, Number, String : null   
      设置一个最小的可选日期。可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 
      初始：$('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });  
      获取：var minDate = $('.selector').datepicker('option', 'minDate');  
      设置：$('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1)); 
     
    monthNames : Array : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] 
      设置所有月份的名称。  
      初始：$('.selector').datepicker(｛monthNames: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']}); 
      获取：var monthNames = $('.selector').datepicker('option', 'monthNames');  
      设置：$('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']); 
     
    monthNamesShort : Array : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

         设置所有月份的缩写。  
      初始：$('.selector').datepicker(｛monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']}); 
      获取：var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort'); 
      设置：$('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']); 
     
    navigationAsDateFormat : Boolean : false 
      如果设置为true，则formatDate函数将应用到prevText,nextText和currentText的值中显示，例如显示为月份名称。  
      初始：$('.selector').datepicker({ navigationAsDateFormat: true });  
      获取：var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat'); 
      设置：$('.selector').datepicker('option', 'navigationAsDateFormat', true);  
     
    nextText : String : 'Next'   
      设置“下个月”链接的显示文字。  
      初始：$('.selector').datepicker({ nextText: 'Later' });  
      获取：var nextText = $('.selector').datepicker('option', 'nextText');  
      设置：$('.selector').datepicker('option', 'nextText', 'Later');  
     
    numberOfMonths : Number, Array : 1  
      设置一次要显示多少个月份。如果为整数则是显示月份的数量，如果是数组，则是显示的行与列的数量。  
      初始：$('.selector').datepicker({ numberOfMonths: [2, 3] });  
      获取：var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths'); 
      设置：$('.selector').datepicker('option', 'numberOfMonths', [2, 3]);  
     
    prevText : String : 'Prev'   
      设置“上个月”链接的显示文字。  
      初始：$('.selector').datepicker({ prevText: 'Earlier' });  
      获取：var prevText = $('.selector').datepicker('option', 'prevText');  
      设置：$('.selector').datepicker('option', 'prevText', 'Earlier');  
     
    shortYearCutoff : String, Number : '+10' 
      设置截止年份的值。如果是（0-99）的数字则以当前年份开始算起，如果为字符串，则相应的转为数字后再与当前年份相加。当超过截止年份时，则被认为是上个世纪。 
      初始：$('.selector').datepicker({ shortYearCutoff: 50 });  
      获取：var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff'); 
      设置：$('.selector').datepicker('option', 'shortYearCutoff', 50);  
     
    showAnim : String : 'show'   
      设置显示、隐藏日期插件的动画的名称。  
      初始：$('.selector').datepicker({ showAnim: 'fold' }); 

     获取：var showAnim = $('.selector').datepicker('option', 'showAnim');  
      设置：$('.selector').datepicker('option', 'showAnim', 'fold');  
     
    showButtonPanel : Boolean : false   
      设置是否在面板上显示相关的按钮。  
      初始：$('.selector').datepicker({ showButtonPanel: true });  
      获取：var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel'); 
      设置：$('.selector').datepicker('option', 'showButtonPanel', true);  
     
    showCurrentAtPos : Number : 0  
      设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位。  
      初始：$('.selector').datepicker({ showCurrentAtPos: 3 });  
      获取：var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos'); 
      设置：$('.selector').datepicker('option', 'showCurrentAtPos', 3);  
     
    showMonthAfterYear : Boolean : false 
      是否在面板的头部年份后面显示月份。  
      初始：$('.selector').datepicker({ showMonthAfterYear: true });  
      获取：var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear'); 
      设置：$('.selector').datepicker('option', 'showMonthAfterYear', true);  
     
    showOn : String : 'focus'   
      设置什么事件触发显示日期插件的面板，可选值：focus, button, both  
      初始：$('.selector').datepicker({ showOn: 'both' });  
      获取：var showOn = $('.selector').datepicker('option', 'showOn');  
      设置：$('.selector').datepicker('option', 'showOn', 'both');  
     
    showOptions : Options : {}  
      如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。  
      初始：$('.selector').datepicker({ showOptions: {direction: 'up' });  
      获取：var showOptions = $('.selector').datepicker('option', 'showOptions');  
      设置：$('.selector').datepicker('option', 'showOptions', {direction: 'up');  
     
    showOtherMonths : Boolean : false   
      是否在当前面板显示上、下两个月的一些日期数（不可选）。  
      初始：$('.selector').datepicker({ showOtherMonths: true });  
      获取：var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths'); 
      设置：$('.selector').datepicker('option', 'showOtherMonths', true);  
     
    stepMonths : Number : 1  
      当点击上/下一月时，一次翻几个月。  
      初始：$('.selector').datepicker({ stepMonths: 3 });  
      获取：var stepMonths = $('.selector').datepicker('option', 'stepMonths');

           设置：$('.selector').datepicker('option', 'stepMonths', 3);  
     
    yearRange : String : '-10:+10'   
      控制年份的下拉列表中显示的年份数量，可以是相对当前年(-nn:+nn)，也可以是绝对值(-nnnn:+nnnn)  
      初始：$('.selector').datepicker({ yearRange: '2000:2010' });  
      获取：var yearRange = $('.selector').datepicker('option', 'yearRange');  
      设置：$('.selector').datepicker('option', 'yearRange', '2000:2010');  
     
     
    ·事件  
     
    beforeShow : function(input)  
      在日期控件显示面板之前，触发此事件，并返回当前触发事件的控件的实例对象。  
      初始：$('.selector').datepicker({ beforeShow: function(input) { ... } });  
     
    beforeShowDay : function(date)  
      在日期控件显示面板之前，每个面板上的日期绑定时都触发此事件，参数为触发事件的日期。调用函数后，必须返回一个数组：[0]此日期是否可选 (true/false)，[1]此日期的CSS样式名称(""表示默认)，[2]当鼠标移至上面出现一段提示的内容。 
      初始：$('.selector').datepicker({ beforeShowDay: function(date) { ... } });  
     
    onChangeMonthYear : function(year, month, inst)  
      当年份或月份改变时触发此事件，参数为改变后的年份月份和当前日期插件的实例。  
      初始：$('.selector').datepicker({ onChangeMonthYear: function(year, month, inst) { ... } }); 
     
    onClose : function(dateText, inst)  
      当日期面板关闭后触发此事件（无论是否有选择日期），参数为选择的日期和当前日期插件的实例。  
      初始：$('.selector').datepicker({ onClose: function(dateText, inst) { ... } }); 
     
    onSelect : function(dateText, inst)  
      当在日期面板选中一个日期后触发此事件，参数为选择的日期和当前日期插件的实例。  
      $('.selector').datepicker({ onSelect: function(dateText, inst) { ... } }); 
     
     
    方法：  
     
    destory  
      从元素中移除拖拽功能。  
      用法：.datepicker( 'destroy' )  
     
    disable  
      禁用元素的拖拽功能。

   

      用法：.datepicker( 'disable' ) 
     
    enable  
      启用元素的拖拽功能。 
      用法：.datepicker( 'enable' ) 
     
    option  
      获取或设置元素的参数。 
      用法：.datepicker( 'option' , optionName , [value] ) 
     
    dialog  
      在dialog插件中打开一个日期插件。 
      用法：.datepicker( 'dialog' , dateText , [onSelect] , [settings] , [pos] ) 
     
    isDisabled  
      确实日期插件是否已被禁用。 
      用法：.datepicker( 'isDisabled' ) 
     
    hide  
      隐藏（关闭）之前已经打开的日期面板。 
      用法：.datepicker( 'hide' , [speed] )  
     
    show  
    .datepicker( 'show' )   
      显示日期插件。  
      用法：.datepicker( 'show' ) 
     
    getDate   
      返回当前日期插件选择的日期。 
      用法：.datepicker( 'getDate' ) 
     
    setDate  
      设置日期插件当前的日期。date参数可以是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日,例如：'+1m +7d')，null表示当天。 
      用法：.datepicker( 'setDate' , date )


 

JQGRID表格使用日期插件datepicker

 

1、引用相关的js和样式文件

2、其中date_check1 实现自已的校验规则，失去焦点时解发此功能
 { name: 'startdate', label: '开始日期', width: 80, editable: true, fixed: true, formatter: 'date', formatoptions: { newformat: 'Y-m-d' }, editrules: { custom: true, custom_func: date_check1 }, editoptions: { dataInit: function(element) { $(element).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true }) } } },

在表格中显示的日期格式需要动态限制范围,即从同行数据中有一个开始时间,则当前(结束时间

)列的显示范围:开始时间---当前系统时间,实现方式如下:
 maxDate:+7,//设置一个最大的可选日期。可以是Date对象，或者是数字（从今天算起，例如

+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 
 minDate:+1,//设置一个最小的可选日期。可以是Date对象，或者是数字（从今天算起，例如

+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 

dataInit: 对应的方法可以提出来写一个方法,
function dataInit(element) {
    //element这个是单元格的对象
    //得到单元格HTML对象ID
    var cellid = element.id;
    var rowid = cellid.split("_")[0];
    var rowData = $("#表格DIV").jqGrid("getRowData",rowid);
    var startDate = rowData.startDate;//startDate开始时间列名,其值为:2014-5-6;
    var startM = startDate.split("_")[1];
    var startD = startDate.split("_")[2];
    var curDate = new Date();
    var m = startM - (curDate.getMonth() + 1);
    var d = startD - curDate.getDate() ;
    var minDate = m + 'm ' + d + 'd';
    $(element).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        minDate:minDate,
        maxDate:0
    })
}

 

 

3、此时加入中文国际化后会导致年和月份的下拉框分行显示了，以jquery-ui-1.8.22.custom.css为例 找到代码 .ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}  删除就好了

 

 

jqgrid 合并单元格

 

列模型定义中增加属性cellattr的值,其值是一个方法.
返回固定值('id=\'name' + rowId + "\'";),其name是列的名称(即这列需要合并)
合并原则是边续行所在此列(比如:name)值相同时合并.
关键方法:function merger(gridName, CellName)
$(document).ready(function() {
            var mydata = [
                    { id: "1", invdate: "2007-10-01", name: "test_test_test_test_test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "2", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "4", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "300.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
                    { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "300.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "13", invdate: "2007-10-01", name: "test_test_test_test_test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "14", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "15", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "16", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "17", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "18", invdate: "2007-09-06", name: "test6", note: "note6", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "19", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                    { id: "20", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "21", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "22", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
                    { id: "23", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "24", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
                ],
                grid = $("#list");

            grid.jqGrid({
                datatype: 'local',
                data: mydata,
                colNames: ['Inv No', 'Date', 'Client A', 'Client B', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
                colModel: [
                    { name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int' },
                    { name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
                        formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y'
                    },
                    { name: 'name', index: 'name', width: 70,
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //合并单元格
                            return 'id=\'name' + rowId + "\'";
                            //if (Number(rowId) < 5) { return ' colspan=2' }
                        }
                    },
                    { name: 'nameB', index: 'nameB', width: 70,
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //if (Number(rowId) < 5) { return ' style="display:none;"' }
                        }
                    },
                    { name: 'amount', index: 'amount', width: 100, formatter: 'number', align: 'right',
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //合并单元格
                            return 'id=\'amount' + rowId + "\'";
                        }
                    },
                    { name: 'tax', index: 'tax', width: 70, formatter: 'number', align: 'right',
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //合并单元格
                            return 'id=\'tax' + rowId + "\'";
                        }
                    },
                    { name: 'total', index: 'total', width: 120, formatter: 'number', align: 'right',
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            //合并单元格
                            return 'id=\'total' + rowId + "\'";
                        }
                    },
                    { name: 'closed', index: 'closed', width: 110, align: 'center', formatter: 'checkbox',
                        edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' }
                    },
                    { name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
                        edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' },
                        //①给当前想合并的单元格设置id
                        cellattr: function(rowId, tv, rawObject, cm, rdata) {
                            return 'id=\'ship_via' + rowId + "\'";
                        }
                    },
                    { name: 'note', index: 'note', width: 100, sortable: false }
                ],
                rowNum: 15,
                rowList: [10, 15, 20, 30],
                pager: '#pager',
                gridview: true,
                rownumbers: true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: 'desc',
                caption: 'Just simple local grid',
                height: '100%',
                gridComplete: function() {
                    //②在gridComplete调用合并方法
                    var gridName = "list";
                    merger(gridName, 'amount');
                    merger(gridName, 'tax');
                    merger(gridName, 'total');
                    merger(gridName, 'name');
                    merger(gridName, 'ship_via');
                }

            });

            //公共调用方法
            function merger(gridName, CellName) {
                //得到显示到界面的id集合
                var mya = $("#" + gridName + "").getDataIDs();
                //当前显示多少条
                var length = mya.length;
                for (var i = 0; i < length; i++) {
                    //从上到下获取一条信息
                    var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
                    //定义合并行数
                    var rowSpanTaxCount = 1;
                    for (j = i + 1; j <= length; j++) {
                        //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
                        var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
                        if (before[CellName] == end[CellName]) {
                            rowSpanTaxCount++;
                            $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
                        } else {
                            rowSpanTaxCount = 1;
                            break;
                        }
                        $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
                    }
                }
            }
        });

 

mike_caoyong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jqgrid根据不同条件合并行
08-17
在开发过程中遇到一个需求，根据供应商合并证照到期提醒天数，感觉还不错，所以就分享给大家
jgrid合并单元格
乐于学习、乐于分享、乐于总结
02-03 775
方式1：根据grid索引/** * @param colIndexs 索引 从0开始 */ jQuery.fn.tuiTableRowSpan = function(colIndexs) { return this.each(function() { var indexs = eval("([" + colIndexs + "])"); for (var
jqgrid 合并单元格
liuliangsailor的专栏
08-28 645
$(document).ready(function() {             var mydata = [                     { id: "1", invdate: "2007-10-01", name: "test_test_test_test_test", note: "note", amount: "200.00", tax: "10.00", closed
【JqGrid】jqgrid合并单元格之jeesite（jsite）项目中dataGrid合并单元格
zhpeng289的博客
05-19 1475
1、参考jqgrid官方的事件和方法http://www.trirand.com/jqgridwik ... %5B%5D=gridcompletehttp://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods 2、Demo如下： 代码看下面： 3.在项目中的应用 //初始化DataTables对象 $('#dataGrid').dataGrid({ searchForm: $("#searchForm"), autoGr.
jqGrid与Struts2的结合应用（八） —— 奇妙的subGrid子表格
piaoxuan1987
01-09 1004
jqGrid的一项高级功能就是嵌套子表格，使用起来也非常简单。使用的方式有两种： 使用普通的subGrid子表格；使用一个完整jqGrid作为子表格； 显然第二种方式更加通用，功能更加强大，因此我主要使用第二种方式。至于第一种方式，可以具体参考官方文档（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid ）。 使用
jqgrid合并单元格，合并行、合并列
01-08
jqgrid合并行、合并列 先看示例图片最终效果： jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...
jqgrid合并单元格.rar
04-07
本压缩包“jqgrid合并单元格.rar”提供了一个解决方案，用于在jqGrid中实现单元格的合并，包括行合并和列合并，使得数据展示更为清晰、有组织。 首先，jqGrid的单元格合并功能主要通过设置表格的colModel属性和grid...
利用jqgrid实现上移下移单元格功能
10-17
在本文中，我们将深入探讨如何使用jqGrid，一个基于jQuery的表格插件，来实现单元格的上移和下移功能。jqGrid提供了一种高效且灵活的方式来展示和操作表格数据，包括与服务器端的数据交互。当我们需要调整表格中数据...
jqGrid表格应用之新增与删除数据附源码下载
11-22
在上一篇文章中，我们提到过jqGrid自身有强大的单元格操作模块，但是这些模块操作起来不太适合用户的习惯，在本文中，我们使用fancybox，以及表单插件来完成jqGrid数据的添加以及删除操作。 XHTML 首先需要在head中...
Jqgrid之强大的表格插件应用
11-22
jqGrid是一款基于jQuery的功能强大的表格插件，使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信，jqGrid运行速度相当快，可以很好的应用在一些后台管理系统来管理大量数据的场合。 jqGrid特性： 基于...
jqGrid使用multiselect翻页时保持选中状态
lianzhang861的博客
09-30 3291
使用场景：表单需要提加jqGrid表格中选中的行的id，而表格由于数据太多需要翻页，但每次选中checkbox翻页再翻回来之前选中的消失了。所以需要做到翻页后再回来之前选中的checkbox继续保持选中状态。 1.首先，要让表格出现checkbox选择框列，需要添加multiselect属性 2.其次：需要了解onSelectAll，onSelectRow，loadComplete三个事件...
jqgrid常用属性整理
sinat_32727833的博客
08-21 374
rownumbers: true, // 添加左侧行号 pager: '#contractBaseinfo_YX_pager',//底部内容：翻页等 width: window.innerWidth,//宽度 height: window.innerHeight - 223,//高度 sortname: 'ContractName',//默认排序字段 sortorder: &amp;quot;desc&amp;quot;,//正逆序...
jqGrid(数据表格)-在头部显示工具栏
幽灵
04-28 2757
    jqGrid表格原生态，像数据表格添加工具栏实现方法。    1、前台页面   &lt;%@ page contentType="text/html;charset=UTF-8" language="java"%&gt; &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt; &lt
antd select 选择器设置默认值问题--强制刷新
热门推荐
倚树探星的博客
06-15 1万+
1、需求场景 需要给弹框里面的 select选择器、DatePicker选择器、RadioGroup设置默认值，默认值根据后台返回数据设置 很明显，该场景是在动态改变数据时设置默认选中的数据（而非在初始化的时候设置默认选中的数据） 默认值是根据 state 中的数据渲染的，不能使用 defaultValue 设置（因为其在生命周期中只执行一次，不参与后续的状态变量同步），需要使用 value 来设置 defaultValue：指定默认选中的条目 value：指定当前选中的条目 2、问题描述 通过 val
关于jqgrid多选框“各种问题”
qq_27203243的博客
05-31 3593
经过我将近一天的时间终于解决了，jqgrid复选框的问题，废话不多说。（底部有代码） 本文解决的问题分为： 1.复选分页，翻页后前一页选中的行不在被选中。 2.点全选按钮，只能选中当前页，第二页第三页等都不会被选中。 3.点击行，复选框会被选中问题（如果有删除操作的话容易导致误选） 4.复选框错位。 解决： //解决复选框错位（可以根据自己具体情况适当修改里面的...
jqgrid单元格合并
韩大璐
11-11 1390
jqgrid是动态加载数据的，所以我们得动态的给每个需要合并的单元格设定id
jqGrid 各种参数 详解
web开发自学
05-09 3108
JQGrid JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。 JQGrid Demo 是一个在线的演示项目。在这里，可以知道jqgrid可以做什么事情。 下面是转自其他人blog的一个学习资料，与其说是学习资料，说成查询帮助文档更加合适。 jqGrid学习之 ------------- 安装 jqGrid安装很简单，只需把相应的c...
55jqGrid 分组 - 多分组所有级数求和(新)
阿甘兄
04-28 904
分组可以在远程数据上实现。如果选项groupDataSorted被打开，那么sidx参数将被放到分组列名上。 这样，服务器就知道通过第一个分组咧进行排序，并且对列进行排序。 HTML代码举例 <html> <head> <title>jqGrid 实例</title> </head> <body> ...
jqgrid 单元格数据格式化 formatter formatoptions
Bran's Blog not try just do best
01-11 6473
jqGrid中对列表cell属性格式化设置主要通过colModel中formatter、formatoptions来设置.jQuery("#jqGrid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', formatter:'integer', formatoptions:{thousand
jqgrid 行编辑/单元格selsect 下拉框并运用select2
最新发布
06-08
您好，针对您的问题，我可以给您提供一些思路和代码示例，希望能帮到您。 首先，要实现 jqgrid 的行编辑和单元格下拉框选择功能，您需要引入以下两个插件： 1. jqGrid：这是一个 jQuery 插件，用于实现表格的展示和编辑功能。 2. select2：这是一个 jQuery 插件，用于实现下拉框的选择和搜索功能。 接下来，您需要在 jqGrid 中定义一个列模型，其中包含需要编辑的列和下拉框列。例如： ``` colModel: [ { name: 'id', index: 'id', editable: false, width: 50 }, { name: 'name', index: 'name', editable: true, edittype: 'text', width: 100 }, { name: 'gender', index: 'gender', editable: true, edittype: 'select', editoptions: { value: 'M:Male;F:Female', dataInit: function(elem) { $(elem).select2({ width: '100%' }); } }, width: 100 } ] ``` 在上面的代码中，第一列是 ID 列，不可编辑；第二列是姓名列，可以编辑，编辑类型为文本框；第三列是性别列，可以编辑，编辑类型为下拉框，下拉框的选项值为 M:Male 和 F:Female，同时使用 select2 插件进行渲染。 最后，在 jqGrid 中启用行编辑功能和单元格编辑功能，例如： ``` editurl: 'server.php', cellEdit: true, cellsubmit: 'clientArray', rownumbers: true, rownumWidth: 40, pager: '#pager', viewrecords: true, caption: 'My first grid', height: 'auto', width: 'auto', ``` 在上面的代码中，editurl 属性指定了提交数据的 URL，cellEdit 属性启用了单元格编辑功能，cellsubmit 属性指定了提交数据的方式，rownumbers 属性启用了行号列，pager 属性指定了分页控件的 ID，viewrecords 属性启用了记录总数和分页信息的显示，caption 属性指定了表格的标题，height 和 width 属性指定了表格的高度和宽度。 以上就是实现 jqGrid 行编辑和单元格下拉框选择的思路和代码示例，希望能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值