最近在跟着学长做一个管理系统，在学习java的同时，接触到了jgrid，不得不说jqgrid十分的强大表格控件。分页，排序，搜索，编辑，删除。。。功能很丰富
首先在js中定义表格模板：
$("#table_list_2").jqGrid({
url:url,
// data:mydata,
datatype: "json",
height:380,
autotrue,
shrinkToFit:true,
multiSort: true,
rownumbers: true, //是否显示行号
multiselect: true, //是否有多选功能
rowNum:10,
rowList:[10,20,30],
emptyrecords : "没有记录",
//下面的colName和colModel是对应的，，colNames的值对应表格中的表头，而colModel的值对应于下面几行的值，所以列数要相等
//注意colModel中name对应的是json数据的键，所以要根据后台传来的数据来设置
colNames:["国家","学校","起始时间","终止时间","详情","操作"],
colModel:[{name:"country",index:"country",editable:true,60,search:true,
editrules: {
required: true
},
//searchoptions是设置表格中用来搜索的条件的,eq表示相等，ne为不等
searchoptions: {
sopt: ['eq', 'ne']
}
},
{name:"organization",index:"organization",editable:true,90,
editrules: {
required: true
},
searchoptions: {
sopt: ['eq', 'ne']
}},
{name:"start_date",index:"start_date",editable:true,100,sorttype:"date",formatter:"date",
editrules: {
required: true
},
//这里调用了laydate的插件，对比其他的日期插件，个人认为是比较好看的
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
$(element).on("click", function () {
laydate({istime: false, format: 'YYYY-MM-DD', choose: function(dates){ //选择好日期的回调
$(element).trigger("change");
}})
})
}
},
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt'],
dataInit: function (element) {
$(element).attr("readonly", "readonly");
$(element).on("click", function () {
laydate({istime: false, format: 'YYYY-MM-DD', choose: function(dates){ //选择好日期的回调
$(element).trigger("change");
}})
})
}
}},
{name:"end_date",index:"end_date",editable:true,100,sorttype:"date",formatter:"date",
editrules: {
required: true
},
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
$(element).on("click", function () {
laydate({istime: false, format: 'YYYY-MM-DD', choose: function(dates){ //选择好日期的回调
$(element).trigger("change");
}})
})
}
},
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt'],
dataInit: function (element) {
$(element).attr("readonly", "readonly");
$(element).on("click", function () {
laydate({istime: false, format: 'YYYY-MM-DD', choose: function(dates){ //选择好日期的回调
$(element).trigger("change");
}})
})
}
}},
{name:"details",index:"details",editable:true,80},
{
sortable: false,
formatter : 'actions', // 在每一行显示编辑按钮与删除按钮
formatoptions : { // 按钮设定
url: updateUrl, //in-line 更新对应的接口
delOptions: {
url: deleteUrl, //删除对应接口
afterSubmit: function (response, postdata) {
var result = response.responseJSON.success;
return [result, '删除失败！', postdata.id];
}
}
}
}],
pager:"#pager_list_2",
//排序为降序
sortorder: "desc",
viewrecords:true,
//设置jqGrid将要向Server传递的参数名称,用来分页
prmNames: {
rows: 'limit',
page: 'page'
},
jsonReader: {
root: 'result',
total: 'pages',
page: 'page',
records: 'recores',
repeatitems: false
},
caption:"出国经历",
add:true,edit:true,addtext:"Add",edittext:"Edit",hidegrid:false
)};
2. jqgird编辑
这里有两种编辑形式，1.行内编辑。
行内编辑的样式是这样的比较方便吧
行内编辑的代码是需要在colModel中加入的：
{ sortable: false, formatter : 'actions', // 在每一行显示编辑按钮与删除按钮 formatoptions : { // 按钮设定 url: updateUrl, //in-line 更新对应的接口 delOptions: { url: deleteUrl, //删除对应接口 afterSubmit: function (response, postdata) { var result = response.responseJSON.success; return [result, '删除失败！', postdata.id]; } } } }
这里的updateUrl和deleteUrl我是在前面便先定义了的，值为后台操纵数据库的接口，我在java里是controller的方法。
2.弹窗编辑。
弹窗编辑的样式
这里的代码是类似的：
{//编辑按钮选项
key: true,
url: updateUrl,
mtype: 'POST',
editCaption: "编辑",
restoreAfterError: true,
afterSubmit : function(response, postdata) {
var result = response.responseJSON.success;
return [result,'更新失败！',postdata.id];
},
closeAfterEdit: true,
extraparam: {
}
}
这些都是jqgrid自带的，这里的编辑按钮是弹窗编辑的。。
3.分页
//设置jqGrid将要向Server传递的参数名称 prmNames: { rows: 'limit', page: 'page' },
后台将会接收传来的限制参数，来显示当前页应该显示的数据，，后台根据传来的当前页数来判断 下一页的记录
查看NetWork的Headers信息，发现传到后台的limit是每页最多显示记录条数，page为当前页。
4.排序和搜索
//搜素按钮对应搜索框设置 multipleSearch:true, //是否开启多条件搜索功能 caption: "搜索...", //搜索模态框标头 multipleGroup: true, //复杂条件与或搜索 Find: "搜索", //搜索按钮显示名称 Reset: "重置", //重置按钮名称 // top: 100, showQuery: false, //是否在搜索模态框中显示生成的搜索条件语句 searchOnEnter: true, //按下回车建是否开始搜索 groupOps: [ { op: "AND", text: "满足以下所有条件" }, { op: "OR", text: "满足以下任意条件" } ], //逻辑条件名称设置 // jqModal: true, // modal: true, drag: true, //搜索模态框是否能够被拖拽动 }
根据Headers显示：
sidx表示排序的列，也就是根据哪一列排序，
sord表示排序的规则，filters代表过滤元素，即
按照这些要求进行搜索
后台将接收过滤条件进行操作
$(window).bind("resize",function(){
var width=$(".jqGrid_wrapper").width();
$("#table_list_2").setGridWidth(width)
});
绑定事件，