小而實用的工具外掛集錦（JQGrid,zTree）
jqgrid，JQGrid是一個在jquery基礎上做的一個表格控制元件，看起來感覺還可以，以ajax的方式和伺服器端通訊
效果圖：
這個小東西，多用在在工作流上面。
參考： https://www.cnblogs.com/dongh/p/8125952.html 官方API: http://www.trirand.com/blog/jqgrid/jqgrid.html
看著還可以，感覺有點嗶格。
subGrid: true, // (1)開啟子表格支援
subGridRowExpanded: function(subgrid_id, row_id) { // (2)子表格容器的id和需要展開子表格的行id，將傳入此事件函式
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t"; // (3)根據subgrid_id定義對應的子表格的table的id
var subgrid_pager_id;
subgrid_pager_id = subgrid_id + "_pgr" // (4)根據subgrid_id定義對應的子表格的pager的id
// (5)動態新增子報表的table和pager
$("#" + subgrid_id).html("<table style=width:100% id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");
// (6)建立jqGrid物件
$("#" + subgrid_table_id).jqGrid({
url: "${ctx}/busi/busiapply/flowchart?busiapplyid="+row_id, // (7)子表格資料對應的url，注意傳入的contact.id引數
datatype: "json",
colNames: ['業務處理時間','業務處理狀態','處理過程描述','操作員'],
colModel: [
{name:"procDate",index:"a.procDate",width:'200%',key:true},
{name:"procState",index:"a.procState",width:'90%',formatter: function(val, obj, row, act){
return js.getDictLabel(${@DictUtils.getDictListJson('bpm_busi_processstate')}, val, '${text('未知')}', true);
}},
{name:"procDesc",index:"a.procDesc",width:'800%',align:"left"},
{name:"user.userName",index:"a.procUser",width:'100%',align:"right"}
],
jsonReader: { // (8)針對子表格的jsonReader設定
root:"gridModel",
records: "record",
repeatitems : false
},
height: "100%",
});
}
頁面引入：
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/src/grid.loader.js" type="text/javascript"></script> .....等，具體參見上面文件，很詳細
zTree外掛，快速構建樹結構。
要求，給出相應的樹結構資料即可。
結構例子：
[id=1823, bm=YL00401, name=新聞大廈, parent=YL004],
[id=1824, bm=YL00402, name=印刷車間, parent=YL004],
[id=1825, bm=YL00403, name=二層辦公樓, parent=YL004],
[id=1826, bm=YL00404, name=二十孔窯洞宿舍, parent=YL004],
[id=1827, bm=YL00405, name=大街商業門市, parent=YL004],
[id=1828, bm=YL00406, name=門房, parent=YL004],
程式碼參考： 注意裡面的 treedata 就上面的的 例子的json資料
function treeload() {
var setting = {
data: {
simpleData: {
enable: true,
idKey: 'bm',
pIdKey: 'parent',
rootPId: 'YL'
}
},
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false,
nameIsHTML: true, //允許name支援html
},
check: {
enable: false
},
edit: {
enable: false,
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
var treeObj = $.fn.zTree.init($("#treeDemo"), setting, treedata);
treeObj.expandAll(true);
}