效果图
html部分
<table id="list2"></table>
<div id="gridpager2"></div>
js部分
<script type="text/javascript">
$(document).ready(function() {
// 'use strict';
var myJSONObject = { "list": [
{
"id":"m1",
"modelcode": "model-money",
"edition": "原件",
"faren": "云南省农信信用社",
"product": "消费贷",
"itemcode": "hyzk",
"itemname": "婚姻状况",
"score": "0.99",
"attribute": [
{"id": "m1_s1","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},
]
},{
"id":"m2",
"modelcode": "model-money",
"edition": "原件",
"faren": "云南省农信信用社",
"product": "消费贷",
"itemcode": "hyzk",
"itemname": "婚姻状况",
"score": "0.99",
"attribute": [
{"id": "m2_s1","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},
{"id": "m2_s2","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},
]
},{
"id":"m3",
"modelcode": "model-money",
"edition": "原件",
"faren": "云南省农信信用社",
"product": "消费贷",
"itemcode": "hyzk",
"itemname": "婚姻状况",
"score": "0.99",
"attribute": [
{"id": "m3_s1","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},
{"id": "m2_s2","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},
]
},
]
};
jQuery("#list2").jqGrid({
datastr : myJSONObject,
datatype: 'jsonstring',
colNames:['模型代码','版本类型', '法人机构','产品类型','评分项目代码','评分项目名称','分值','操作'],
colModel:[
{name:'modelcode',index:'mxdm', width:90},
{name:'edition',index:'edition', width:100},
{name:'faren',index:'faren', width:100},
{name:'product',index:'product', width:100},
{name:'itemcode',index:'itemcode', width:100},
{name:'itemname',index:'itemname', width:100},
{name:'score',index:'score', width:100},
{name:'handle',index:'handle', width:100,
formatter: formatContext
}
],
pager : '#gridpager2',
rowNum:10,
scrollOffset:0,
height: 'auto',
autowidth:true,
viewrecords: true,
gridview: true,
jsonReader: {
repeatitems: false,
page: function() { return 1; },
root: "list"
},
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id, iData = -1;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<div style='margin :0 20px 20px 20px'><table id='"+subgrid_table_id+"' class='scroll'></table></div>");
$.each(myJSONObject.list,function(i,item){
if(item.id === row_id) {
iData = i;
return false;
}
});
if (iData == -1) {
return; // no data for the subgrid
}
jQuery("#"+subgrid_table_id).jqGrid({
datastr : myJSONObject.list[iData],
datatype: 'jsonstring',
colNames: ['模型代码','版本类型', '法人机构','产品类型','评分项目代码','评分因子代码','评分因子名称','分值','操作'],
colModel: [
{name:'modelcode',index:'mxdm', width:90},
{name:'edition',index:'edition', width:100},
{name:'faren',index:'faren', width:100},
{name:'product',index:'product', width:100},
{name:'itemcode',index:'itemcode', width:100},
{name:'yinzicode',index:'itemcode', width:100},
{name:'yinziname',index:'itemname', width:100},
{name:'score',index:'score', width:100},
{name:'handle',index:'handle', width:100,
formatter: formatContext1
}
],
rowNum:20,
// pager: pager_id,
sortname: 'name',
sortorder: "asc",
height: 'auto',
autowidth:true,
jsonReader: {
repeatitems: false,
page: function() { return 1; },
root: "attribute"
}
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});
}
});
});
function formatContext( cellvalue, options, rowObject ){
var id = options.rowId;
return '<span class="handle" onclick="edit(this)">编辑</span><em class="marLR">|</em><span class="handle" onclick="deleteApply(this)">删除</span>';
}
function formatContext1( cellvalue, options, rowObject ){
var id = options.rowId;
return '<span class="handle" onclick="edit(this)">编辑</span><em class="marLR">|</em><span class="handle" onclick="deleteApply(this)">删除</span>';
}
</script>