jQuery插件之异步树插件

 

此插件原创为http://www.cnblogs.com/xuanye/   预览http://jscs.cloudapp.net/

 

资源文件下载tree.rar （注：资源文件必须和使用页面为同级，否则请自行修改图片等路径）

 

treedata = [{ "id": "0", "text": "中国", "value": "86", "showcheck": true, complete: true, "isexpand": true, "checkstate": 0, "hasChildren": true, "ChildNodes":
[{ "id": "1", "text": "北京市", "value": "11", "showcheck": true, "isexpand": false, "checkstate": 0, "hasChildren": true, "ChildNodes": null, "complete": false }, 
{ "id": "2", "text": "天津市", "value": "12", "showcheck": true, "isexpand": false, "checkstate": 0, "hasChildren": true, "ChildNodes": null, "complete": false }]
}]

/*showcheck 是否显示复选框
complete  不知道,博主根节点为true,子节点为false
isexpand  是否展开
checkstate 是否选中
haschildren 是否有子节点

childnodes 为数组

*/

 

 

<div style="margin-bottom:5px;">
        <button id="showchecked">Get Selected Nodes</button>
        <button id="showcurrent">Get Current Node</button>
        <img src="images/checkbox_0.gif" style="width: 16px; height: 16px" /></div>
    <div style="border-bottom: #c3daf9 1px solid; border-left: #c3daf9 1px solid; width: 250px; height: 500px; overflow: auto; border-top: #c3daf9 1px solid; border-right: #c3daf9 1px solid;">
        <div id="tree">
            
        </div>
        
    </div>

 

<script type="text/javascript">
        $.ajaxSetup({
            cache:false
        });
        $(document).ready(function() {
            $.getJSON("handler.ashx", {}, function(treedata) {
                    var o = {
                        showcheck: true,
                        onnodeclick: function(item) { alert(item.text); },
                        url: "handler.ashx"
                    };
                    o.data = treedata;
                    $("#tree").treeview(o);//使用


                    $("#showchecked").click(function(e) {
                        var s = $("#tree").getTSVs(); //方法可以去插件源码自行修改返回值
                        if (s != null)
                            alert(s.join(","));
                        else
                            alert("NULL");
                    });
                    $("#showcurrent").click(function(e) {
                        var s = $("#tree").getTCT();
                        if (s != null)
                            alert(s.text);
                        else
                            alert("NULL");
                    });
             }); 
        });
    </script>

 

 

me[0].t = {
            getSelectedNodes: function() {
                var s = [];
                getck(treenodes, s, function(item) { return item });
                return s;
            },
            getSelectedValues: function() {
                var s = [];
                getck(treenodes, s, function(item) { return item.value });
                return s;
            },
            getCurrentItem: function() {
                return dfop.citem;
            }
        };

//return item 

这个item则为相关项的json对象
比如说
{ "id": "2", "text": "天津市", "value": "12", "showcheck": true, "isexpand": false, "checkstate": 0, "hasChildren": true, "ChildNodes": null, "complete": false }

 

 

 

{id=1&text=%25E5%258C%2597%25E4%25BA%25AC%25E5%25B8%2582&value=11&checkstate=0}
这是后台接收到的参数  为点击的节点的信息

public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        if(context.Request.Form.Count==0)
        context.Response.Write(getJson(getDt("0"),false));
        else
            context.Response.Write(getJson(getDt(context.Request.Form["id"]),true));
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    private DataTable getDt(string areaID) {
        string sql = @"SELECT A.ID,A.AreaName,A.AreaCode,A.ParentID
                                , case when isnull(B.c,0)>0 then 1 else 0 end as HasChild FROM AreaDivide as  A
                            LEFT JOIN 
                            ( SELECT COUNT(1) as c ,ParentID AS PID FROM AreaDivide AS MA GROUP BY ParentID) as B
                            ON A.ID=B.PID WHERE A.ParentID=@ParentID and len(A.AreaCode)<7
                            Order By A.AreaCode";
        SqlParameter[] parms = new SqlParameter[] { 
            new SqlParameter("@ParentID",SqlDbType.VarChar)
        };
        parms[0].Value = areaID;
        return SqlHelper.ExecuteDataSet(sql, parms).Tables[0];
    }

    // bool child(是否是子节点， true为根节点，false为子节点)
    public string getJson(DataTable dt,bool child) {

        string json = "";
        if (!child)
            json += "[{ \"id\": \"0\", \"text\": \"中国\", \"value\": \"86\", \"showcheck\": true, complete: true, \"isexpand\": true, \"checkstate\": 0, \"hasChildren\": true, \"ChildNodes\":[";
        else
            json += "[";
        foreach (DataRow item in dt.Rows)
        {
            json += "{";
            json += string.Format("\"id\": \"{0}\", \"text\": \"{1}\", \"value\": \"{2}\", \"showcheck\": true, complete: false, \"isexpand\": false, \"checkstate\": 0, \"hasChildren\": {3}, \"ChildNodes\":null",
                item["id"].ToString(), item["areaname"].ToString(), item["areacode"].ToString(), item["haschild"].ToString() == "1" ? "true" : "false");
            json += "},";
        }
        json = json.Substring(0, json.Length - 1);
        if (!child)
            json += "]}]";
        else
            json += "]";

        return json;
    }