小而实用的工具插件集锦（JQGrid,zTree）

jqgrid，JQGrid是一个在jquery基础上做的一个表格控件，看起来感觉还可以，以ajax的方式和服务器端通信

效果图：

这个小东西，多用在在工作流上面。

中文文档: http://blog.mn886.net/jqGrid/

参考： 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);
}