Extjs3.4 带复选框的树结构（Tree+checkbox）案例 -

colddemon

浏览: 63671 次

最近访客更多访客>>

leimingchao

kitlee

ningzong

从零开始Dg

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

Extjs

ext tree checkbox

框架为struts2

1. jsp页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>种类指派</title>
<!-- ExtJS library -->
<link rel="stylesheet" type="text/css" href="css/ext/ext-all.css" />
<script type="text/javascript" src="js/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script type="text/javascript" src="js/ext/edittree/categorychecktree.js"></script>
<script type="text/javascript" src="js/ext/edittree/TreeCheckNodeUI.js"></script>
<script type="text/javascript" src="js/ext/examples.js"></script>
<link href="css/ext/ext-patch.css"  type="text/css" rel="stylesheet"/>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="css/ext/examples.css" />


<style type="text/css">
    .complete .x-tree-node-anchor span {
        text-decoration: line-through;
        color: #777;
    }
  .x-tree-node .root{
  background-image: url(css/images/default/tree/category.png)
  }  
</style>
</head>
<body style="padding:0 0 0 ;">
<!-- EXAMPLES -->
<div id="tree-div" ></div>
<input type="hidden" id="name" name="name" value='<s:property value="product.name"/>'/>
<input type="hidden" id="productid" name="productid" value='<s:property value="productid"/>'/>
</body>
</html>

2.categorychecktree.js

/*!
 * Ext JS Library 3.4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */

Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({
        renderTo:'tree-div',
     //   title: document.getElementById('name').value+'——>指派种类',
        align:'center',
        height: 300,
        width: 400,
        useArrows:true,
        autoScroll:true,
        animate:true,
       // enableDD:true,拖拽
        containerScroll: true,
        expanded:true,
        rootVisible: false,
        checkModel:'single',
        onlyLeafCheckable:true,
        frame: true,
        root: {
            nodeType: 'async',
            text:'选择类别' ,
            iconCls:''       
        },//loader 引用插件TreeCheckNodeUI，实现单选功能
      loader: new Ext.tree.TreeLoader({
        dataUrl: 'categorycheckjson.action?productid='+document.getElementById('productid').value,
      baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性
      }),
        
        buttons: [{
            text: '指派种类',
            handler: function(){
                var categoryId = '', selNodes = tree.getChecked();
                var productid=document.getElementById('productid').value;
                if(selNodes.length==0){
                Ext.Msg.alert('提示','请选择指派种类');
                }
                Ext.each(selNodes, function(node){
                    if(categoryId.length > 0){
                        categoryId += ', ';
                    }
                   // msg += node.text;
                    categoryId += node.attributes['categoryId'];
                 
                 Ext.MessageBox.confirm("确认","确定指派种类吗？",function(e){
                if (e == "yes") {
    
              //提交到服务器操作
                 Ext.Ajax.request({ 
                            url: 'asignCategory.action',
                            params: {categoryId:categoryId,productid:productid},
                            method: 'POST',
                            dataType:'json',          
                            success:function(form,action){
                            var obj = Ext.util.JSON.decode(form.responseText);   
                            if(obj.success==true)   
                           {    
                               Ext.Msg.alert('指派成功',obj.msg);   
                               var win = parent.Ext.getCmp('win');
                               if (win) {win.close();}  
                             }   
                          else  
                            {   
                           //Ext.Msg.alert('提示',obj.errors);   
                              Ext.Msg.alert('指派错误',obj.msg);   
                              }     
                            },
                            //提交失败的回调函数
                            failure:function(){                           
                                 Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                            }
                          });
           
                } else if (e == "no") {
                 // alert("no");
                } else if (e == "cancel") {
                  //alert("cancel");       
                }});
                   
                });
            }
        },{
            text: '关闭',
            handler: function(){
              var win = parent.Ext.getCmp('win');
          //  alert(win2);
            if (win) {win.close();}  
          //  window.parent.location.href='roleGrid.action'
            }
        }]
    });
    tree.getRootNode().expand(true);
     tree.root.getUI().getIconEl().src ='';
//'js/ext/icons/fam/book.png';   
    
    /////////////////////////
    
});

其中 json格式：


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"}]});