jqgrid插件

最近给导师做的项目中，大量的使用到了表格，所有的表格都是基于jqgrid这个插件来实现的，接下来，我将详细的总结一下这个框架

jqGrid是一个在jQuery基础上做的一个表格控件，主要以ajax的方式和服务器进行通信。

首先是他的安装，跟大多数js插件一样，只要导入相应的js文件就可以了，因为基于jQuery的所以需要到导入的插件有

 jqGrid是典型的B/S架构，服务器端只是提供数据管理，客户端只提供数据显示。换句话说，jqGrid可以以一种更加简单的方式来展现你数据库的信息，而且也可以把客户端数据传回给服务器端。 

对于jqGrid我们所关心的就是：必须有一段代码把一些页面信息保存到数据库中，而且也能够把响应信息返回给客户端。jqGrid是用ajax来实现对请求与响应的处理。

 从3.5版本开始，jqGrid完全支持jqueryUI的theme。我们可以从http://jqueryui.com/themeroller/下载我们所需要的theme。当然，你也可以编辑自己的theme。jqGrid 

也并不需要把所有的css文件都引入进来，只需导入核心css文件“ui.theme.css ”以及“ui.core.css”即可，文件位于目录development-bundle/themes下。

相应的配置以及代码段如下所示：

var curwidth=document.documentElement.clientWidth*0.96;

if(curwidth<800){curwidth=800;}else;

var size=10;//可用不设置，默认为10

//var child_size=5;//可用不设置，默认为5

var use_toolbar=false;//可用不设置，默认为true

var toolbar_type="both";//可用不设置，默认为both

//var bottom_data="放一些汇总数据或相关信息";//可用不设置

//var use_child=true;//可用不设置，默认为false

var width=curwidth;//可用不设置，默认为false

var child_width=curwidth;//可用不设置，默认为false

//名称和url

var loadUrl='examModulelist.do';

var deleteUrl='';

var table_id="toolbar1";

var pager_id="pgtoolbar1";

var caption="考试模板";

//var child_id="list10_d";

//var childpager_id="pager10_d";

var key_id="examModuleId";

var sortname="examModuleId";

var sortorder="asc";

//数据

    varcolNames=['编号','考试模板名称','创建人','创建/修改时间','使用次数','是否可用','操作'];

    var colModel=[  

      {name:'examModuleId',key:true,index:'examModuleId', width:'5%',sorttype:"int",sortable:true,align :'center' },  

          {name:'moduleName',index:'moduleName',hidedlg:true,width:'20%',sortable:true,editable:true,editoptions:{size:10},align:'center' },

          {name:'teachername',jsonmap:'courseTeacher.worker.name',index:'courseTeacherId',width:'10%',sortable:false,editable:true,editoptions:{size:10},align:'center'},

          {name:'modifyTime',index:'modifyTime',width:'15%',sortable:false,editable:true,editoptions:{size:10},align:'center'}, 

          {name:'usedTimes',key:true,index:'usedTimes', width:'10%',sorttype:"int",sortable:true,align :'center' },

          {name:'useable',key:true,index:'useable',width:'10%',edittype:'select',align :'center' },

          {name:'act',index:'act',width:'30%',sortable:false,editable:true,align:'center'}

       ];

       

       $(function()  

{   

    //;

    $("#"+table_id).jqGrid({  

       url:loadUrl,

       postData:postData,  

       datatype: "json",  

       height: 'auto',  

       width:width,  

       mtype: 'POST',

       autowidth: false,

       colNames:colNames,  

       colModel:colModel,  

       gridview: true,

       rownumbers:true,

       imgpath: 'css/ui-lightness/images', //图片路径   

       multiselect: true, //是否支持多选 

       viewrecords:true,

       pgtext: "第 {0} 页／共 {1} 页",

       recordtext: '第 {0} – {1} 条  共{2} 条数据',

       emptyrecords: '暂无数据显示',

       ///recordtext:'dasdsa', 哈哈，我也能改啊

       ///recordpos:left, 

       ///pginput:false,

       rowNum:size,  

       ////footerrow:true,

      rowList:[5,10,20,30,50,100], 

       pager: '#'+pager_id,

       loadError: function(xhr, status, error) {

          ;

       },   

       gridComplete: function(){

var ids = $("#"+table_id).jqGrid('getDataIDs');

for(var i=0;i < ids.length;i++){

var cl = ids[i];

var c = $("#"+table_id).jqGrid('getCell', cl,'useable');

if(c == "Y"){

ab= "修改信息"; 

ad= "修改结构"; 

//ae= "试卷管理"; 

ae = "试卷管理";

af= "";

//ac= ""; 

ac= ""; 

$("#"+table_id).jqGrid('setRowData',ids[i],{act:ab+ad+af+ac});

}else{

ab= "";

//ac= ""; 

ac= ""; 

$("#"+table_id).jqGrid('setRowData',ids[i],{act:ab+ac});

}

}

},

       

       onSelectRow: function(ids) {

       //;

if(ids == null){

;

} else {

if(use_child){

destoryChild(child_id);

var rowData = $("#"+table_id).jqGrid("getRowData",ids); 

      vartaskType=rowData.taskType; 

     if(taskType!="2"){

var newurl=loadUrl+"?"+key_id+"="+ids;

//;

//;

loadChild(child_id,newurl);

var caption=ids+":"+rowData.name+"作业中使用的模板";

$("#"+child_id).jqGrid('setCaption',caption);

}

}

}

},

   jsonReader:jsonReader,  

   prmNames:prmNames, 

   caption:caption,

   toolbar:[use_toolbar,toolbar_type]    

});  

$("#"+table_id).jqGrid('navGrid','#'+pager_id,{edit:false,add:false,del:false}

); 

if(use_toolbar==true){

addToolbar(table_id,loadUrl,deleteUrl); 

}

})

我使用的版本的显示效果如下