jqgrid加載展開下級表格
前面已經能夠將靜態數據展現到表格裏了，接下來，將對行處理，使得點擊行頭第一列的時候， 能夠出現二級表格，如javascript
這裏主要就是在生成表格的時候給它加個事件定義：css
subGridRowExpanded: function(subgrid_id, row_id){}
在事件裏面能夠再次照着表格定義的內容，生成子級表格，這樣打開後就能夠出現二級表格了。html
同時，鑑於此，這裏也能夠經過動態獲取數據來動態加載控制起來。上面的是靜態數據，其實，只要經過異步加載，獲取到要加載的數據以後，後面的操做也就同樣的了。java
參考代碼jquery
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>數據展現,分3級，點擊展開下一級子表格的demo</title>
<% String base = request.getContextPath(); %>
<link id="uiThemes" rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<!-- 引入jQuery -->
<script src="<%=base %>/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<%-- <script src="<%=base %>/js/jquery-ui-1.10.2.min.js" type="text/javascript"></script> --%>
<script src="<%=base %>/js/grid.locale-cn.js" type="text/javascript"></script>
<script src="<%=base %>/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script>
//定義數據源
var mydata = [
{id:"1",userName:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
{id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
{id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
{id:"4",userName:"馬六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
{id:"5",userName:"趙錢",gender:"男",email:"4fja@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
{id:"6",userName:"小毛",gender:"男",email:"ahfi@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
{id:"7",userName:"小李",gender:"女",email:"note@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
{id:"8",userName:"小三",gender:"男",email:"oefh@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
{id:"9",userName:"孫先",gender:"男",email:"76454533@qq.com",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}
];
var url = "<%=request.getContextPath()%>/GetDataServlet";
var obj = new Object();
var data = new Object();
$.post(
url,
function(result){
obj = strToJson(result);
if(obj!=null){
data =obj.rows;
createJQGrid();
}
}
);
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}
function createJQGrid(){
$("#gridTable").jqGrid({
url:url,
datatype: "json", //數據類型
mtype:"GET",//提交方式
height: 250,
colNames:['編號','用戶名', '郵箱', '年齡','暱稱','操做'], //至關於展示列表的//顯示名稱
colModel:[ //列定義，name定義的是對應於數據源的key標示，index對應的則是傳到服務器斷用來排序用的列名稱
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'username',index:'userName', width:90},
{name:'nickname',index:'nickname', width:100} ,
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'age',index:'age', width:100} ,
{name:'actions', index:'actions', width:80, align:'left', sortable:false,
formatter:function(cellvalue,options,rowObject){
if(cellvalue == null ||cellvalue==""){
return "";
}
return "<a href='" + cellvalue + "' target='_blank'>查看</a>";
}
}
],
sortname:'id',//按這個字段排序
sortorder:'asc',//升序
viewrecords:true,//定義是否要顯示總記錄數
rowNum:10, //在grid上顯示記錄條數，這個參數會傳到後臺去
rowList:[10,20,30], //可選的每頁多少記錄
subGrid: true,
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>");
$("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames:['編號','用戶名', '性別', '郵箱', 'QQ','手機號','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'userName',index:'userName', width:90},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',hidden:false,index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
rownumbers: false,
multiselect: false,
viewrecords: true,
rowNum:100,
height: '100%', // deleteSuspectedItem
width: '100%',
subGrid: true,
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>");
$("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames:['編號','用戶名', '性別', '郵箱', 'QQ','手機號','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'userName',index:'userName', width:90},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',hidden:false,index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
rownumbers: false,
multiselect: false,
viewrecords: true,
rowNum:100,
height: '100%', // deleteSuspectedItem
width: '100%'
});
for(var i=0;i<=mydata.length;i++)
jQuery("#"+subgrid_table_id).jqGrid('addRowData',i+1,mydata[i]);
}
});
for(var i=0;i<=mydata.length;i++)
jQuery("#"+subgrid_table_id).jqGrid('addRowData',i+1,mydata[i]);
},
subGridRowColapsed: function(subgrid_id, row_id) {
},
pager:"#gridPager", //定義翻頁用的導航欄，必須是有效的html元素，翻頁工具欄位置能夠防止在//任意位置
caption: "第一個jqGrid例子" //表格頭的名稱
}).navGrid('#gridPager',{edit:false,add:false,del:false});
for(var i=0;i<=data.length;i++)
jQuery("#gridTable").jqGrid('addRowData',i+1,data[i]);
}
</script>
<style>
p{
color:red;
}
</style>
</head>
<body>
<!-- jqGrid的table -->
<table id="gridTable"></table>
<!-- 翻頁的div -->
<div id="gridPager"></div>
<br/>
</body>
</html>
通過測試，發現，jqgrid這個最多隻能到16級子表格，不過也確定是夠用了json
相關文章
- 1. jqGrid subGrid配置 如何首次加載動態展開全部的子表格
- 2. jqGrid表格展示簡單實例
- 3. jqGrid TreeGrid 加載數據 排序 擴展
- 4. jqGrid表格實例
- 5. angularjs + jqgrid 實現表格
- 6. jqGrid的subGrid子表格
- 7. 下載表格
- 8. jqGrid--加載事件loadComplete_gridComplete_ondblClickRow
- 9. jqgrid加載本地數據
- 10. jstree動態加載，下級node加載前，無展開圖標解決方法。
- 更多相關文章...
- • ionic 加載動作 - ionic 教程
- • ionic 加載動畫 - ionic 教程
- • PHP開發工具
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
