实例显示了一个简单的带复选框的的树,通过返回的JSON数据来显示复选框是否是选中/不选中状态。例子中没有采用异步的方式展开节点。如果想使用异步方式加载节点,可以参考本站另一片文章来实现此功能,链接地址为:www.mhzg.net/a/20112/2011222109040.html
效果图
js代码:
- Ext.require([
- 'Ext.tree.*',
- 'Ext.data.*',
- 'Ext.window.MessageBox'
- ]);
-
- Ext.onReady(function(){
- varstore=Ext.create('Ext.data.TreeStore',{
- proxy:{
- type:'ajax',
- url:'check-nodes.json'
- },
- sorters:[{
- property:'leaf',
- direction:'ASC'
- },{
- property:'text',
- direction:'ASC'
- }]
- });
-
- vartree=Ext.create('Ext.tree.Panel',{
- store:store,
- rootVisible:false,
- useArrows:true,
- frame:true,
- title:'CheckTree',
- renderTo:'tree-div',
- width:289,
- height:220,
- dockedItems:[{
- xtype:'toolbar',
- items:{
- text:'Getcheckednodes',
- handler:function(){
- varrecords=tree.getView().getChecked(),
- names=[];
- Ext.Array.each(records,function(rec){
- names.push(rec.get('text'));
- });
- Ext.MessageBox.show({
- title:'SelectedNodes',
- msg:names.join('<br/>'),
- icon:Ext.MessageBox.INFO
- });
- }
- }
- }]
- });
- });
HTML代码:
- <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1">
- <title>TreeExample</title>
- <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
- <linkrel="stylesheet"type="text/css"href="../shared/example.css"/>
-
- <scripttype="text/javascript"src="../../bootstrap.js"></script>
- <scripttype="text/javascript"src="check-tree.js"></script>
- <style>
- .x-tree-checked{
- text-decoration:line-through;
- color:#777;
- }
- .x-grid-row-selected.x-grid-cell{
- background-color:#efefef!important;
- }
- </style>
- </head>
- <body>
- <divid="tree-div"></div>
- </body>
- </html>
JSON:
- [{
- "text":"ToDo",
- "cls":"folder",
- "expanded":true,
- "children":[{
- "text":"Gojogging",
- "leaf":true,
- "checked":true
- },{
- "text":"Takeanap",
- "leaf":true,
- "checked":false
- },{
- "text":"ClimbEverest",
- "leaf":true,
- "checked":false
- }]
- },{
- "text":"GroceryList",
- "cls":"folder",
- "children":[{
- "text":"Bananas",
- "leaf":true,
- "checked":false
- },{
- "text":"Milk",
- "leaf":true,
- "checked":false
- },{
- "text":"Cereal",
- "leaf":true,
- "checked":false
- },{
- "text":"Energyfoods",
- "cls":"folder",
- "children":[{
- "text":"Coffee",
- "leaf":true,
- "checked":false
- },{
- "text":"RedBull",
- "leaf":true,
- "checked":false
- }]
- }]
- },{
- "text":"RemodelProject",
- "cls":"folder",
- "children":[{
- "text":"Finishthebudget",
- "leaf":true,
- "checked":false
- },{
- "text":"Callcontractors",
- "leaf":true,
- "checked":false
- },{
- "text":"Choosedesign",
- "leaf":true,
- "checked":false
- }]
- }]
OK。。实例中,当我们选择了某个节点的复选框,点击 Get checked nodes 按钮,我们可以得到此节点的text值,本例当点击Get checked nodes按钮,弹出的对话框会显示Go jogging。可我们在实际操作中,显示的文本并不能满足我们的需求,一般来说,我们需要获取此节点的ID值,然后传到服务端,进行操作。下面改造下我们的JS代码:
- Ext.require([
- 'Ext.tree.*',
- 'Ext.data.*',
- 'Ext.window.MessageBox'
- ]);
-
- Ext.onReady(function(){
- varstore=Ext.create('Ext.data.TreeStore',{
- proxy:{
- type:'ajax',
- url:'check-nodes.json'
- },
- sorters:[{
- property:'leaf',
- direction:'ASC'
- },{
- property:'text',
- direction:'ASC'
- }]
- });
-
- vartree=Ext.create('Ext.tree.Panel',{
- store:store,
- rootVisible:false,
- useArrows:true,
- frame:true,
- title:'CheckTree',
- renderTo:'tree-div',
- width:289,
- height:220,
- dockedItems:[{
- xtype:'toolbar',
- items:{
- text:'Getcheckednodes',
- handler:function(){
- varrecords=tree.getView().getChecked(),
- names=[];
- //为存储ID而创建数组
- ids=[];
- Ext.Array.each(records,function(rec){
- names.push(rec.get('text'));
- //将选中的节点的ID保存
- ids.push(rec.get('id'));
- });
- Ext.MessageBox.show({
- title:'SelectedNodes',
- msg:names.join('<br/>')+ids.join('<br/>'),
- icon:Ext.MessageBox.INFO
- });
- }
- }
- }]
- });
- });
例子中我们增加了一个数组ids,并在循环中将被选中的节点压入ids中,最后在对话框中显示选中节点的text值和id值。在尝试之前,我们还需要将我们的JSON数据做下调整。调整后的JSON数据如下:
- [{
- "text":"ToDo",
- "cls":"folder",
- "expanded":true,
- "children":[{
- "text":"Gojogging",
- "id":"3",
- "leaf":true,
- "checked":true
- },{
- "text":"Takeanap",
- "leaf":true,
- "id":"4",
- "checked":false
- },{
- "text":"ClimbEverest",
- "leaf":true,
- "id":"5",
- "checked":false
- }]
- },{
- "text":"GroceryList",
- "cls":"folder",
- "children":[{
- "text":"Bananas",
- "leaf":true,
- "id":"8",
- "checked":false
- },{
- "text":"Milk",
- "leaf":true,
- "id":"10",
- "checked":false
- },{
- "text":"Cereal",
- "leaf":true,
- "id":"15",
- "checked":false
- },{
- "text":"Energyfoods",
- "cls":"folder",
- "children":[{
- "text":"Coffee",
- "leaf":true,
- "id":"52",
- "checked":false
- },{
- "text":"RedBull",
- "leaf":true,
- "id":"13",
- "checked":false
- }]
- }]
- },{
- "text":"RemodelProject",
- "cls":"folder",
- "children":[{
- "text":"Finishthebudget",
- "leaf":true,
- "id":"34",
- "checked":false
- },{
- "text":"Callcontractors",
- "leaf":true,
- "id":"103",
- "checked":false
- },{
- "text":"Choosedesign",
- "leaf":true,
- "id":"6",
- "checked":false
- }]
- }]
是的,在JSON数据中,要返回id的值,这样才能确保代码可以获取正确的值。