JQATT全称(JqueryAjaxTreeTable)控件

效果图如下

 

另外两个图片也一起传上来吧,各位另存一下就好

 

(function (JQ) {

    //JQ.fn.extend({

    JQ.fn.JQAjaxTreeTable = function (Options) {

        var _thisTable = JQ(this);
        /*
        * Options的属性 Options.dataPrimaryKey //数据的主键名 Options.fnFormatData
        * //格式化数据显示效果的方法 Options.addImgSrc //+号图片的地址 Options.subImgSrc
        * //-号图片的地址
        */

        Options.dataPrimaryKey = Options.dataPrimaryKey || "id";
        Options.addImgSrc = Options.addImgSrc || "/images/p.gif";
        Options.subImgSrc = Options.subImgSrc || "/images/s.gif";
        Options.sendToServerData = {};
        /**
        * 格式化tr内容的方法 data 是后台传输过来的参数
        */
        Options.fnFormatData = Options.fnFormatData
					|| function (itemdata, index, formatMethod) {
					    for (var p in itemdata) {
					        s += formatMethod("<td>{0}<td>", itemdata[p]);
					    }
					    return s;
					};

        // 渲染子节点
        function RenderChild(responseText) {

            var $thisTR = this.$tr;

            var CurrentRowData = this.CurrentRowData; // 被点击行的数据,通过ajax的context传递过来

            var CurrentRowId = CurrentRowData[Options.dataPrimaryKey]; // 被点击行的主键值

            var parendids = $thisTR.attr("parentid") || "_p0"; // 被点击行的父辈
            var re = /\_p/ig; // 创建正则表达式模式。
            var r = parendids.match(re); // 尝试去匹配搜索字符串。
            var level = r.size(); // 总共有几个_p 也就是有几级
            var result = eval("( " + responseText + ")"); // 把客户端返回的字符串解析一下.

            var $treeimg = $thisTR.find("img.treeimg");

            //判断是 -号图片就直接收缩起来.
            if ($treeimg.attr("src") == Options.subImgSrc) {
                //收缩操作,找到所有的字系列
                $treeimg.attr("src", Options.addImgSrc);

                var childtr = _thisTable.find("tr[parentid*='_p" + CurrentRowId + "_p']");
                childtr.remove();

            } else {
                // 展开操作
                $treeimg.attr("src", Options.subImgSrc);

                for (var i = 0; i < result.length; i++) {
                    var rowdata = result[i];

                    if (isempty(rowdata)) continue;

                    var newtr = format("<tr parentid='{0}_p{1}' ></tr>",
								parendids,
                                rowdata[Options.dataPrimaryKey]);

                    newtr = JQ(newtr);
                    newtr.data(rowdata); // 把数据绑定到tr上
                    var s = format("<td>" +
                        "<span style='width:{1}px;display: inline-block;text-align: right;'><img alt='' class='treeimg'  src='{0}' /></span>" +
                        "</td>", Options.addImgSrc, level * 20);

                    s += Options.fnFormatData(rowdata, i, format);

                    newtr.append(s);
                    $thisTR.after(newtr);

                    // 给新增加的行添加上单击事件处理方法 
                    newtr.find("img.treeimg").click(onImgClick);
                }


            }

        }

        // 使用示例
        // var template = "{0}欢迎你在{1}上给{0}留言，交流看法";
        // var author = "晴枫";
        // var site = "枫芸志";
        // var msg = String.format(template, author, site);
        function format(src) {
            if (arguments.length == 0)
                return null;
            var args = Array.prototype.slice.call(arguments, 1);
            return src.replace(/\{(\d+)\}/g, function (m, i) {
                return args[i];
            });
        };

        function isempty(obj) {
            if (obj == null || obj == "" || obj == undefined) {
                return true;
            }

            for (var p in obj) {
                return false; //有属性就是false
            }
            return true;
        }

        // 当+号被点击时触发
        function onImgClick() {

            // this 指向的是当前被点击的+号图片
            var $thisTR = JQ(this).parents("tr");

            var CurrentRowData = $thisTR.data();

            if (isempty(CurrentRowData)) {
                CurrentRowData = { dataId: $thisTR.attr("dataid") };
            } else {
                CurrentRowData.dataId = CurrentRowData.Id || CurrentRowData.dataId;
            }



            // 加个参数OptionMethod=GetChildrenTrData一起传到后台
            CurrentRowData.OptionMethod = "GetChildrenTrData";

            //每次都传递到后台的参数
            for (var p in Options.sendToServerData) {
                CurrentRowData[p] = Options.sendToServerData[p];
            }

            var d = {
                type: "post",
                context: {
                    "$tr": $thisTR,
                    "CurrentRowData": CurrentRowData
                }, // 把当前点击的Tr 传递到ajax回调函数中
                data: CurrentRowData,
                success: RenderChild
            };
            if (Options.url) {
                d.url = Options.url;
            }
            JQ.ajax(d); 

        }



        function fristLoad() {
            var $fristtr = _thisTable.find("tr:first");
            var CurrentRowData = {};
            CurrentRowData.OptionMethod = "GetChildrenTrData";
            CurrentRowData.dataId = 0;
            var d = {
                type: "post",                
                context: {
                    "$tr": $fristtr,
                    "CurrentRowData": CurrentRowData
                }, // 把当前点击的Tr 传递到ajax回调函数中
                data: CurrentRowData,
                success: RenderChild
            };
            if (Options.url) {
                d.url = Options.url;
            }

            JQ.ajax(d);
        }


        fristLoad();

        _thisTable.find("tr img.treeimg").click(onImgClick);

    }

    //   });

})(jQuery || JQ || $);

 

 控件初成,代码简单.就是为了给你的table加上树的功能...为了提高客户端效率,,采用ajax技术从后台动态读取数据..

控件本身使用方法如下;

 html部分

<div id="mainContent">
  <table width="100%" id="tablist"  cellspacing="0" cellpadding="0" border="1" bordercolorlight="#DDDDDD" class="datatable" bordercolordark="#FFFFFF">
     <tr>
     <th width="5%">序号</th>
     <th width="65%">类型名称</th>
     <th width="10%">实体产品</th>
     <th width="20%">操作</th> 
    </tr>
  </table>
 
</div>

就是部分

 <script type="text/javascript"> 
        JQ("#mainContent table").JQAjaxTreeTable({
            addImgSrc: "../images/p.gif",
            subImgSrc: "../images/s.gif",
            url:"后台ajax页面取数据的地方",
            dataPrimaryKey:"Id",
            fnFormatData: function (itemdata, index, formatMethod) 
            {
                return formatMethod("<td><input type='hidden' value='{0}' >{2} </td>" +
                                        "<td>{3} </td>" +
                                    "<td><a href=product_type_edit.aspx?id={4}>编辑</a> <a href='#' οnclick='Del(this,{4})'>删除</a> <a href='product_type_edit.aspx?parentId={4}'>添加子系列</a> </td> "
                                    , itemdata.id
                                    , 0
                                    , itemdata.TypeName
                                    , itemdata.IsEntityProduct
                                    , itemdata.Id);
            }
        }); 
    </script>

 后台提供数据的方法如下依asp.net为例,,当然改成java也能用,返回的格式一定是json数据才好处理哦,至于怎么拼装成json各位就自己发挥吧,

 

protected void Page_Load(object sender, EventArgs e)
{

//这个控件会传递一个参数dataId到后台,因为id用的太多了,容易混乱所以就用dataId了..
            string Id = Request["dataId"];
//再传递第二个参数OptionMethod其值永为GetChildrenTrData
            if (Request["OptionMethod"] == "GetChildrenTrData")
            {
                GetChildren(Id);
                Response.End();
                return;
            }
}

 private void GetChildren(string id)
        {
            Shop.BLL.Product.ProductType data = new Shop.BLL.Product.ProductType();
            List<Model.Product.ProductType> list1 = data.GetAllByWhere("ParentId = '" + id + "' order by id desc");
            int ln = list1.Count;
            string[] js = new string[ln];

            for (int i = 0; i < ln; i++)
            {
                js[i] = string.Empty;
                Model.Product.ProductType pt = list1[i];
                js[i] += string.Format("TypeName:'{0}',ParentId:'{1}',IsEntityProduct:'{2}',Id:'{3}'" 
                                        , pt.TypeName
                                        , pt.ParentId
                                        , (pt.IsEntityProduct.ToString() == "1" ? "是" : "否")
                                        , pt.Id);
                //  js[i] +=string.Format("<a href=product_type_edit.aspx?id={0}>编辑</a><a href='#' οnclick='Del({0})'>删除</a> <a href='product_type_edit.aspx?parentId={0}'>添加子系列</a>", pt.Id.ToString());
                // js[i].AppendFormat("<a href=product_type_edit.aspx?id={0}>编辑</a>");
            }
            Response.Write("[{" +
                                string.Join(" },{ ", js) +
                           "}]");
        }