`
dowhathowtodo
  • 浏览: 777380 次
文章分类
社区版块
存档分类
最新评论

ExtJS4学习笔记(十八)---带复选框的树（Checkbox tree）

 
阅读更多

实例显示了一个简单的带复选框的的树，通过返回的JSON数据来显示复选框是否是选中/不选中状态。例子中没有采用异步的方式展开节点。如果想使用异步方式加载节点，可以参考本站另一片文章来实现此功能，链接地址为：www.mhzg.net/a/20112/2011222109040.html


效果图

js代码：

  1. Ext.require([
  2. 'Ext.tree.*',
  3. 'Ext.data.*',
  4. 'Ext.window.MessageBox'
  5. ]);

  7. Ext.onReady(function(){
  8. varstore=Ext.create('Ext.data.TreeStore',{
  9. proxy:{
  10. type:'ajax',
  11. url:'check-nodes.json'
  12. },
  13. sorters:[{
  14. property:'leaf',
  15. direction:'ASC'
  16. },{
  17. property:'text',
  18. direction:'ASC'
  19. }]
  20. });

  22. vartree=Ext.create('Ext.tree.Panel',{
  23. store:store,
  24. rootVisible:false,
  25. useArrows:true,
  26. frame:true,
  27. title:'CheckTree',
  28. renderTo:'tree-div',
  29. width:289,
  30. height:220,
  31. dockedItems:[{
  32. xtype:'toolbar',
  33. items:{
  34. text:'Getcheckednodes',
  35. handler:function(){
  36. varrecords=tree.getView().getChecked(),
  37. names=[];
  39. Ext.Array.each(records,function(rec){
  40. names.push(rec.get('text'));
  41. });
  43. Ext.MessageBox.show({
  44. title:'SelectedNodes',
  45. msg:names.join('<br/>'),
  46. icon:Ext.MessageBox.INFO
  47. });
  48. }
  49. }
  50. }]
  51. });
  52. });

HTML代码：

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1">
  5. <title>TreeExample</title>
  6. <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
  7. <linkrel="stylesheet"type="text/css"href="../shared/example.css"/>

  9. <scripttype="text/javascript"src="../../bootstrap.js"></script>
  10. <scripttype="text/javascript"src="check-tree.js"></script>
  12. <style>
  13. .x-tree-checked{
  14. text-decoration:line-through;
  15. color:#777;
  16. }
  17. .x-grid-row-selected.x-grid-cell{
  18. background-color:#efefef!important;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <divid="tree-div"></div>
  24. </body>
  25. </html>

JSON：

  1. [{
  2. "text":"ToDo",
  3. "cls":"folder",
  4. "expanded":true,
  5. "children":[{
  6. "text":"Gojogging",
  7. "leaf":true,
  8. "checked":true
  9. },{
  10. "text":"Takeanap",
  11. "leaf":true,
  12. "checked":false
  13. },{
  14. "text":"ClimbEverest",
  15. "leaf":true,
  16. "checked":false
  17. }]
  18. },{
  19. "text":"GroceryList",
  20. "cls":"folder",
  21. "children":[{
  22. "text":"Bananas",
  23. "leaf":true,
  24. "checked":false
  25. },{
  26. "text":"Milk",
  27. "leaf":true,
  28. "checked":false
  29. },{
  30. "text":"Cereal",
  31. "leaf":true,
  32. "checked":false
  33. },{
  34. "text":"Energyfoods",
  35. "cls":"folder",
  36. "children":[{
  37. "text":"Coffee",
  38. "leaf":true,
  39. "checked":false
  40. },{
  41. "text":"RedBull",
  42. "leaf":true,
  43. "checked":false
  44. }]
  45. }]
  46. },{
  47. "text":"RemodelProject",
  48. "cls":"folder",
  49. "children":[{
  50. "text":"Finishthebudget",
  51. "leaf":true,
  52. "checked":false
  53. },{
  54. "text":"Callcontractors",
  55. "leaf":true,
  56. "checked":false
  57. },{
  58. "text":"Choosedesign",
  59. "leaf":true,
  60. "checked":false
  61. }]
  62. }]

OK。。实例中，当我们选择了某个节点的复选框，点击 Get checked nodes 按钮，我们可以得到此节点的text值，本例当点击Get checked nodes按钮，弹出的对话框会显示Go jogging。可我们在实际操作中，显示的文本并不能满足我们的需求，一般来说，我们需要获取此节点的ID值，然后传到服务端，进行操作。下面改造下我们的JS代码：

  1. Ext.require([
  2. 'Ext.tree.*',
  3. 'Ext.data.*',
  4. 'Ext.window.MessageBox'
  5. ]);

  7. Ext.onReady(function(){
  8. varstore=Ext.create('Ext.data.TreeStore',{
  9. proxy:{
  10. type:'ajax',
  11. url:'check-nodes.json'
  12. },
  13. sorters:[{
  14. property:'leaf',
  15. direction:'ASC'
  16. },{
  17. property:'text',
  18. direction:'ASC'
  19. }]
  20. });

  22. vartree=Ext.create('Ext.tree.Panel',{
  23. store:store,
  24. rootVisible:false,
  25. useArrows:true,
  26. frame:true,
  27. title:'CheckTree',
  28. renderTo:'tree-div',
  29. width:289,
  30. height:220,
  31. dockedItems:[{
  32. xtype:'toolbar',
  33. items:{
  34. text:'Getcheckednodes',
  35. handler:function(){
  36. varrecords=tree.getView().getChecked(),
  37. names=[];
  38. //为存储ID而创建数组
  39. ids=[];
  41. Ext.Array.each(records,function(rec){
  42. names.push(rec.get('text'));
  43. //将选中的节点的ID保存
  44. ids.push(rec.get('id'));
  45. });
  47. Ext.MessageBox.show({
  48. title:'SelectedNodes',
  49. msg:names.join('<br/>')+ids.join('<br/>'),
  50. icon:Ext.MessageBox.INFO
  51. });
  52. }
  53. }
  54. }]
  55. });
  56. });

例子中我们增加了一个数组ids,并在循环中将被选中的节点压入ids中，最后在对话框中显示选中节点的text值和id值。在尝试之前，我们还需要将我们的JSON数据做下调整。调整后的JSON数据如下：

  1. [{
  2. "text":"ToDo",
  3. "cls":"folder",
  4. "expanded":true,
  5. "children":[{
  6. "text":"Gojogging",
  7. "id":"3",
  8. "leaf":true,
  9. "checked":true
  10. },{
  11. "text":"Takeanap",
  12. "leaf":true,
  13. "id":"4",
  14. "checked":false
  15. },{
  16. "text":"ClimbEverest",
  17. "leaf":true,
  18. "id":"5",
  19. "checked":false
  20. }]
  21. },{
  22. "text":"GroceryList",
  23. "cls":"folder",
  24. "children":[{
  25. "text":"Bananas",
  26. "leaf":true,
  27. "id":"8",
  28. "checked":false
  29. },{
  30. "text":"Milk",
  31. "leaf":true,
  32. "id":"10",
  33. "checked":false
  34. },{
  35. "text":"Cereal",
  36. "leaf":true,
  37. "id":"15",
  38. "checked":false
  39. },{
  40. "text":"Energyfoods",
  41. "cls":"folder",
  42. "children":[{
  43. "text":"Coffee",
  44. "leaf":true,
  45. "id":"52",
  46. "checked":false
  47. },{
  48. "text":"RedBull",
  49. "leaf":true,
  50. "id":"13",
  51. "checked":false
  52. }]
  53. }]
  54. },{
  55. "text":"RemodelProject",
  56. "cls":"folder",
  57. "children":[{
  58. "text":"Finishthebudget",
  59. "leaf":true,
  60. "id":"34",
  61. "checked":false
  62. },{
  63. "text":"Callcontractors",
  64. "leaf":true,
  65. "id":"103",
  66. "checked":false
  67. },{
  68. "text":"Choosedesign",
  69. "leaf":true,
  70. "id":"6",
  71. "checked":false
  72. }]
  73. }]

是的，在JSON数据中，要返回id的值，这样才能确保代码可以获取正确的值。


分享到：
| ExtJS4学习笔记(十七)---锁定表头(Locking ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics