直接上代码,其它与后台交互和一般Grid没有区别:
html代码:
<table id="kpiTable" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="kpiPager"></div>
js代码:
jQuery("#kpiTable").jqGrid({
url:"../dashbord/getParentKPI.do",
datatype: "json",
height: 400,
width:915,
colNames:['ID','KPI分类', '分类名称'],
colModel:[
{name:'id',index:'id', width:55, sortable:true},
{name:'type',index:'type', width:150,editable:true},
{name:'label',index:'label', width:150,editable:true}
],
rowNum:8,
rowList:[8,10,20,30],
pager: '#kpiPager',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: false,
subGrid: true,
editurl:"../dashbord/editParentType.do",
jsonReader : {
id : '0'
},
caption: "KPI分类",
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"../dashbord/getSonKPI.do?pid="+row_id,
datatype: "json",
colNames: ['ID','分类ID','KPI指标ID','指标名称'],
colModel: [
{name:"id",index:"id",width:80,key:true,align:"center"},
{name:"pid",index:"pid",width:80,editable:true},
{name:"type",index:"type",width:80,align:"center",editable:true},
{name:"label",index:"label",width:120,align:"left",editable:true}
],
rowNum:20,
width:868,
pager: pager_id,
viewrecords : true,
forceFit : true,
editurl:"../dashbord/editSonType.do",
jsonReader : {
id : '0'
},
sortname: 'id',
height:"100%"
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:true,add:true,del:true})
}
}).navGrid("#kpiPager",{
edit : true,
add : true,
del : true
});
分享到:
相关推荐
jqGrid是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。
MVC4网站中集成jqGrid表格插件-示例源代码
MVC4网站中集成jqGrid表格插件-示例源代码,包含基础basecontroller,以及5个controller
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqgrid-jquery-rails 由Doc Walker认可提供为Rails 3.1+资产管道打包的jqGrid jQuery插件。安装将这些行添加到应用程序的Gemfile : # jqgrid jquery plugin packaged for the rails asset pipelinegem 'jqgrid-...
截止今天最新的程序,看好日期哟,另外截止今天官网的正式版还没有出来,请不要被骗
jQgrid+demo
jqGrid没有setComplexGroupHeaders方法,使用此插件实现三级分组表头功能
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqgrid-contextmenu-show-hide-columns jQGrid 具有显示/隐藏列功能(上下文菜单) 此存储库是讨论在 jqGrid 中添加显示/隐藏列功能的最佳方法的草案。 在列中添加可见性属性 右键单击标题以显示带有列复选框列表...
jqGrid增加时--判断开始日期与结束日期(实例代码)。需要的朋友可以过来参考下,希望对大家有所帮助
jquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zip
jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar
Jqgrid demo-史上最强大,没有之一, 为了大家能够更好的学习和使用Jqgrid网格插件,我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实现一个Jqgrid网格插件的demo。当然官方网站上面已经有了PHP版本和ASP.NET版本...
jquery.jqGrid-4.4.3,用于web页面的列表分页显示
NULL 博文链接:https://only-xxp.iteye.com/blog/768029
jqGrid4.2 2011-12-1最新版本
jquery.jqGrid-4.5.2.zip 官方资源文件
jqgrid jquey 样式 让表格变得更漂亮
Lib.AspNetCore.Mvc.JqGrid 一组库,它们支持和ASP.NET Core中的使用。 这是从jqGrid的相关功能ASP.NET核心演进 。 Lib.AspNetCore.Mvc.JqGrid.Infrastructure-表示jqGrid选项的类,枚举和常量。 由所有库共享。 Lib...