jqGrid 项目总结
/*
jqGrid 如何开始工作 （how jqGrid works ）
jqGrid依赖于jqueryui的css和主题包，
从 www.jqueryui.com 下载 jquery-ui-custom.css和对应的主题包。
从http://www.trirand.com/blog/?page_id=6 jqgrid的官网下载jqGrid，可以自定义，选择需要的插件，不会的同学可以全选，使用jqGrid的min版。
想看源码的话 jqgrid git https://github.com/tonytomov/jqGrid ，可以从git下载，git下载的源码是分开的。
*/
var customOperate = {
"url":"",
customEdit:function(url, rowId){
this.url = this.url || "www.baidu.com"
//console.log("编辑",url, rowId);
return false;
},
customRedoPub:function(url, rowId){
//console.log("撤销",url, rowId);
return false;
},
customDel:function(url, rowId){
//console.log("删除",url, rowId);
return false;
}
};
jQuery(function(){
/*
jquery.tablednd.js 初始化拖动插件
*/
jQuery("#hrCalendar").tableDnD({
scrollAmount:100,
topIndex:3,
startIndex:0,
onDrop:function(a, b){
//a 为 table，b为拖动的行
},
onDragStart:function(a, b){
//a 为 table，b为拖动的行
this.startIndex = $(b).index() ;
},
/*
@parm a:拖动的行
@parm b:释放鼠标左键时的行
@return boolean 是否可以拖动
*/
onAllowDrop:function(a, b){
var $b = $(b), $bIndex = $b.index() ;
if( this.startIndex > this.topIndex && $bIndex > this.topIndex && $bIndex !== 0 ){
return true;
}else if( this.startIndex <= this.topIndex && $bIndex <= this.topIndex && $bIndex !== 0) {
return true;
}else{
return false;
}
}
});
/*jqGrid
1、options 初始化参数
*/
jQuery("#hrCalendar").jqGrid({
url:'data/a.json', //请求数据格式url
datatype: "json", //返回的数据类型
colNames:['主显月份', '主题', '起始时间','结束时间','状态','执行操作'], //header，表头显示的name
colModel:[ //定义每列值的属性，具体的可以参见 colModel Options http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
{name:'id',index:'id', align:"center",width:50},
{name:'',index:'', align:"center"},
{name:'',index:'', align:"center"},
{name:'',index:'', align:"center"},
{name:'',index:'', align:"center"},
{name:'note',index:'note', sortable:false, align:"center"}
],
rowNum:10,
autowidth:true, //width:auto;
multiselect:true, //true,第一列添加checkbox，可以全选
multiselectWidth:51, //checkbox 列宽
height: 'auto', //与width不同，设置height：auto，
pagerpos:"right", //是用默认分页的时候，分页页码在nav上的位置。
hoverrows: false, //鼠标经过行时hover样式，true，增加hover状态。
altRows:true, //是否隔行换色，
altclass:"ui-state-highlight-hover", //隔行换色的class。
sortname: 'invdate',
iewrecords: true,
sortorder: "desc",
beforeSelectRow:function(){ //事件：在选中行之前，返回true，选中行，返回false，不选中。
return false;
},
//@parm data:返回的json对象
loadComplete:function(data){ //加载完数据时，在回调函数中，生成分页。
$.customPager({
"page": data.page, //当前页
"total": data.total, //总页数
"records": data.records //总记录数
})
},
gridComplete: function() { //表格生成完成后的回调函数。
$("#_empty","#hrCalendar").addClass("nodrag nodrop");
jQuery("#hrCalendar").tableDnDUpdate(); //更新jquery.tablednd.js插件的方法。
var rowIds = jQuery("#hrCalendar").jqGrid('getDataIDs'); //返回当前grid里所有数据的id
for(var i=0;i < rowIds.length;i++){
var rowId = rowIds[i];
var content = ['编辑内容|',
'撤销发布| ',
'删除 '].join("");
//根据rowid来设定指定列的值。
jQuery("#hrCalendar").setCell(rowId,"note", content, "", { title:" "} );
}
}
});
$.customPager = function(options){
var op = $.extend({
"page": 1, //当前页
"total": 2, //总页数
"records": 14 //总记录数
}, options);
$("#totalNum").text(op.total);
var arr = $(".digg").find("a");
var first = arr[0],
last = arr[4],
prev = arr[1],
next = arr[3],
cur = arr[2];
$(first).attr("page", 1);
$(last).attr("page", op.total);
$(cur).attr("page", op.page).text(op.page);
//上一页和第一页
if( op.page <= 1 ){
$(prev).hide();
}else{
$(prev).attr("page", op.page - 1);
$(prev).show();
}
//下一页和最后一页
if( op.page >= op.total ){
$(next).hide();
}else{
$(next).attr("page", op.page + 1);
$(next).show() ;
}
arr.click(function(){
var page = $(this).attr("page");
$("#hrCalendar").setGridParam({ "page": page }); //这个是用自己的分页很方便，只要设一下jqgrid的参数page就可以了。
$("#hrCalendar").trigger("reloadGrid"); //页数变了，然后重新加载grid。
})
}
})json 数据格式
{
"page": 2,
"total": 5,
"records": 14,
"rows": [{
"id": "14",
"cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
},{
"id": "13",
"cell": ["2011年8月1日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
}, {
"id": "12",
"cell": ["2011年8月1日", "休假规则", "2011年8月1日", "2011年8月1日", "已发布", null]
}, {
"id": "11",
"cell": ["2011年5月1日", "年度调薪", "2011年8月1日", "2011年8月1日", "已发布", null]
}, {
"id": "10",
"cell": ["2011年4月1日", "个人晋升", "2011年8月1日", "2011年8月1日", "已发布", null]
}, {
"id": "9",
"cell": ["2010年5月1日", "公司福利", "2011年8月1日", "2011年8月1日", "已发布", null]
}, {
"id": "8",
"cell": ["2011年8月1日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
}, {
"id": "7",
"cell": ["2011年3月1日", "休假规则", "2011年8月1日", "2011年8月1日", "已发布", null]
}, {
"id": "6",
"cell": ["2010年8月1日", "公司福利", "2011年8月1日", "2011年8月1日", "已发布", null]
}, {
"id": "5",
"cell": ["2011年8月1日", "个人晋升", "2011年8月1日", "2011年8月1日", "已发布", null]
}, {
"id": "4",
"cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
},{
"id": "3",
"cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
},{
"id": "2",
"cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
},{
"id": "1",
"cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
}]
}