<!DOCTYPE HTML>
<html lang=“en-US”>
<head>
<meta charset=“UTF-8”>
<title></title>
<!– jqgrid 依赖于 jqueryui ，对应的主题需要自己从jqueryui的网上下载。 –>
<link rel=“stylesheet” type=“text/css” href=“css/custom-jqgird/jquery-ui-1.8.16.custom.css” media=“all”/>
<!– ui.jqgrid.css 在下载的jqGrid包里 –>
<link rel=“stylesheet” type=“text/css” href=“css/ui.jqgrid.css” media=“all”/>
</head>
<body>
<div class=“tab-con”>
<div class=“result-table”>
<table id=“hrCalendar”></table> <div id=“phrCalendar”></div>
</div>
<!–pagger 在这里我没有使用默认的分页，而是自己另外写的。–>
<div class=“digg ar”>
<a href=“#2” target=“_self” page=“2” class=“”><<</a>
<a href=“#2” target=“_self” page=“2” class=“”>上一页</a>
<span><span class=“digg-font”>第</span><a href=“#2” target=“_self” page=“2” class=“”>1</a>/<span id=“totalNum”>15</span><span class=“digg-font”>页</span></span>
<a href=“#2” target=“_self” page=“2” class=“”>下一页</a>
<a href=“#2” target=“_self” page=“2” class=“”>>></a>
</div>
</div>
<!– js –>
<script type=“text/javascript” src=“js/jquery-1.6.2.min.js”></script>
<!– jqGrid de iln8 语言包，中文环境下必须安装grid.locale-cn.js，其他环境需要装对应的语言包 –>
<script type=“text/javascript” src=“js/grid.locale-cn.js”></script>
<!– jqGrid的所有的压缩版。 –>
<script type=“text/javascript” src=“js/jquery.jqGrid.min.js”></script>
<!– js 以上这些在你下载的压缩包都有。–>
<!–jquery.tablednd.js 这个不属于jqGrid，这是另外一个jquery的插件，用来实现行间的拖动 –>
<script type=“text/javascript” src=“js/jquery.tablednd.js”></script>
<script type=“text/javascript”>
//js
</script>
<!– js –>
</body>
</html>
/*
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”,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,
autotrue, //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 = [‘<a href=”#” class=”bluelink” onclick=”customOperate.customEdit(\’\’,’ + rowId + ‘)”>编辑内容</a>|’,
‘<a href=”#” class=”redlink” onclick=”customOperate.customRedoPub(\’\’,’ + rowId + ‘)”>撤销发布</a>| ‘,
‘<a href=”#” class=”redlink” onclick=”customOperate.customDel(\’\’,’ + rowId + ‘)”>删除</a> ‘].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]
}]
}