EasyUI多行树形表格下拉框

太空漫步11

于 2024-04-07 10:33:57 发布

阅读量444

点赞数 12

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/zhourongxiang1/article/details/137454814

版权

Controller.java

@Controller
public class IndexController {
    @RequestMapping("/combotreegrid")
    public String combotreegrid(){
        return "easyui/combotreegrid.html";
    }
}

combotreegrid.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Multiple ComboTreeGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/demo/demo.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Multiple ComboTreeGrid</h2>
<p>Click the right arrow button to show the TreeGrid and select items.</p>
<div style="margin:20px 0"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
    <div style="margin-bottom:20px">
        <input class="easyui-combotreegrid" data-options="
					width:'100%',
					panelWidth:500,
					label:'Select Items:',
					labelPosition:'top',
					url:'/easyui/demo/combogrid/treegrid_data1.json',
					method: 'get',
					idField:'id',
					treeField:'name',
					multiple:true,
					value:['211','31'],
					columns:[[
						{field:'name',title:'Name',width:200},
						{field:'size',title:'Size',width:100},
						{field:'date',title:'Date',width:100}
					]]">
    </div>
</div>
</body>
</html>

treegrid_data1.json

[{
	"id":1,
	"name":"C",
	"size":"",
	"date":"02/19/2010",
	"children":[{
		"id":2,
		"name":"Program Files",
		"size":"120 MB",
		"date":"03/20/2010",
		"children":[{
			"id":21,
			"name":"Java",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"children":[{
				"id":211,
				"name":"java.exe",
				"size":"142 KB",
				"date":"01/13/2010"
			},{
				"id":212,
				"name":"jawt.dll",
				"size":"5 KB",
				"date":"01/13/2010"
			}]
		},{
			"id":22,
			"name":"MySQL",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"children":[{
				"id":221,
				"name":"my.ini",
				"size":"10 KB",
				"date":"02/26/2009"
			},{
				"id":222,
				"name":"my-huge.ini",
				"size":"5 KB",
				"date":"02/26/2009"
			},{
				"id":223,
				"name":"my-large.ini",
				"size":"5 KB",
				"date":"02/26/2009"
			}]
		}]
	},{
		"id":3,
		"name":"eclipse",
		"size":"",
		"date":"01/20/2010",
		"children":[{
			"id":31,
			"name":"eclipse.exe",
			"size":"56 KB",
			"date":"05/19/2009"
		},{
			"id":32,
			"name":"eclipse.ini",
			"size":"1 KB",
			"date":"04/20/2010"
		},{
			"id":33,
			"name":"notice.html",
			"size":"7 KB",
			"date":"03/17/2005"
		}]
	}]
}]