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='#' onclick='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='#' onclick='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) +                           "}]");        }