Extjs3.4 带复选框的树结构(Tree+checkbox)案例

框架为struts2 

1. jsp页面: 


Java代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <%@taglib prefix="s" uri="/struts-tags"%>  
  3. <%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>    
  4. <html xmlns="http://www.w3.org/1999/xhtml" >  
  5.   <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7. <title>种类指派</title>  
  8. <!-- ExtJS library -->  
  9. <link rel="stylesheet" type="text/css" href="css/ext/ext-all.css" />  
  10. <script type="text/javascript" src="js/ext/ext-base.js"></script>  
  11. <script type="text/javascript" src="js/ext/ext-all.js"></script>  
  12. <script type="text/javascript" src="js/ext/edittree/categorychecktree.js"></script>  
  13. <script type="text/javascript" src="js/ext/edittree/TreeCheckNodeUI.js"></script>  
  14. <script type="text/javascript" src="js/ext/examples.js"></script>  
  15. <link href="css/ext/ext-patch.css"  type="text/css" rel="stylesheet"/>  
  16.   
  17. <!-- Common Styles for the examples -->  
  18. <link rel="stylesheet" type="text/css" href="css/ext/examples.css" />  
  19.   
  20.   
  21. <style type="text/css">  
  22.     .complete .x-tree-node-anchor span {  
  23.         text-decoration: line-through;  
  24.         color: #777;  
  25.     }  
  26.   .x-tree-node .root{  
  27.   background-image: url(css/images/default/tree/category.png)  
  28.   }    
  29. </style>  
  30. </head>  
  31. <body style="padding:0 0 0 ;">  
  32. <!-- EXAMPLES -->  
  33. <div id="tree-div" ></div>  
  34. <input type="hidden" id="name" name="name" value='<s:property value="product.name"/>'/>  
  35. <input type="hidden" id="productid" name="productid" value='<s:property value="productid"/>'/>  
  36. </body>  
  37. </html>  


2.categorychecktree.js 

Java代码   收藏代码
  1. /*! 
  2.  * Ext JS Library 3.4.0 
  3.  * Copyright(c) 2006-2011 Sencha Inc. 
  4.  * [email protected] 
  5.  * http://www.sencha.com/license 
  6.  */  
  7.   
  8. Ext.onReady(function(){  
  9.     var tree = new Ext.tree.TreePanel({  
  10.         renderTo:'tree-div',  
  11.      //   title: document.getElementById('name').value+'——>指派种类',  
  12.         align:'center',  
  13.         height: 300,  
  14.         width: 400,  
  15.         useArrows:true,  
  16.         autoScroll:true,  
  17.         animate:true,  
  18.        // enableDD:true,拖拽  
  19.         containerScroll: true,  
  20.         expanded:true,  
  21.         rootVisible: false,  
  22.         checkModel:'single',  
  23.         onlyLeafCheckable:true,  
  24.         frame: true,  
  25.         root: {  
  26.             nodeType: 'async',  
  27.             text:'选择类别' ,  
  28.             iconCls:''         
  29.         },//loader 引用插件TreeCheckNodeUI,实现单选功能  
  30.       loader: new Ext.tree.TreeLoader({  
  31.         dataUrl: 'categorycheckjson.action?productid='+document.getElementById('productid').value,  
  32.       baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性  
  33.       }),  
  34.           
  35.         buttons: [{  
  36.             text: '指派种类',  
  37.             handler: function(){  
  38.                 var categoryId = '', selNodes = tree.getChecked();  
  39.                 var productid=document.getElementById('productid').value;  
  40.                 if(selNodes.length==0){  
  41.                 Ext.Msg.alert('提示','请选择指派种类');  
  42.                 }  
  43.                 Ext.each(selNodes, function(node){  
  44.                     if(categoryId.length > 0){  
  45.                         categoryId += ', ';  
  46.                     }  
  47.                    // msg += node.text;  
  48.                     categoryId += node.attributes['categoryId'];  
  49.                    
  50.                  Ext.MessageBox.confirm("确认","确定指派种类吗?",function(e){  
  51.                 if (e == "yes") {  
  52.       
  53.               //提交到服务器操作  
  54.                  Ext.Ajax.request({   
  55.                             url: 'asignCategory.action',  
  56.                             params: {categoryId:categoryId,productid:productid},  
  57.                             method: 'POST',  
  58.                             dataType:'json',            
  59.                             success:function(form,action){  
  60.                             var obj = Ext.util.JSON.decode(form.responseText);     
  61.                             if(obj.success==true)     
  62.                            {      
  63.                                Ext.Msg.alert('指派成功',obj.msg);     
  64.                                var win = parent.Ext.getCmp('win');  
  65.                                if (win) {win.close();}    
  66.                              }     
  67.                           else    
  68.                             {     
  69.                            //Ext.Msg.alert('提示',obj.errors);     
  70.                               Ext.Msg.alert('指派错误',obj.msg);     
  71.                               }       
  72.                             },  
  73.                             //提交失败的回调函数  
  74.                             failure:function(){                             
  75.                                  Ext.Msg.alert('错误','服务器出现错误请稍后再试!');  
  76.                             }  
  77.                           });  
  78.              
  79.                 } else if (e == "no") {  
  80.                  // alert("no");  
  81.                 } else if (e == "cancel") {  
  82.                   //alert("cancel");         
  83.                 }});  
  84.                      
  85.                 });  
  86.             }  
  87.         },{  
  88.             text: '关闭',  
  89.             handler: function(){  
  90.               var win = parent.Ext.getCmp('win');  
  91.           //  alert(win2);  
  92.             if (win) {win.close();}    
  93.           //  window.parent.location.href='roleGrid.action'  
  94.             }  
  95.         }]  
  96.     });  
  97.     tree.getRootNode().expand(true);  
  98.      tree.root.getUI().getIconEl().src ='';  
  99. //'js/ext/icons/fam/book.png';     
  100.       
  101.     /////////////////////////  
  102.       
  103. });  



其中 json格式: 
Java代码   收藏代码
  1. stcCallback1001({totalCount:"8",results:[{productid:"13",name:"考试",companyName:"教育",create_time:"2012-08-06 16:14:32"},{productid:"12",name:"ggg",companyName:"4546",create_time:"2012-08-06 16:13:29"},{productid:"11",name:"3434",companyName:"3444",create_time:"2012-08-06 16:12:44"},{productid:"10",name:"333",companyName:"fff",create_time:"2012-08-06 16:12:02"},{productid:"9",name:"考试",companyName:"教育",create_time:"2012-08-06 16:10:53"},{productid:"8",name:"999",companyName:"教育",create_time:"2012-08-06 16:09:36"},{productid:"7",name:"考试",companyName:"教育",create_time:"2012-08-06 16:08:20"},{productid:"6",name:"学",companyName:"教育",create_time:"2012-08-06 15:50:26"}]});  

你可能感兴趣的:(Extjs3.4 带复选框的树结构(Tree+checkbox)案例)