您的位置：首页 > 其它

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

2013-08-10 15:25 447 查看

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显示数据,属性,多重表头,子表,行编辑,单元格编辑等

转自:/article/11609072.html





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_DayAccountSearchController/getDaySearchListController.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);

}

}

}

});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航