jqGrid 项目总结
- <!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",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 = ['<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]
- }]
- }