jqgrid插件

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

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

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

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

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

  从3.5版本开始，jqGrid完全支持jquery UI的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";

//数据

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

    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);  

      var taskType=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); 

}

})

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