树型菜单数据项AJAX实现增删改查

原创 2015年07月08日 14:42:51

首先请查一下最终的效果:


实现的思路很简单,即首构建一个JSON数据,这里已经通过后台排好序并且已做好了父子关系,然后通过QUI列表控件显示出来,也可以直接用HTML显示,代码如下:

<!--框架必需start-->

<script type="text/javascript" charset="utf-8" src="@Url.Content("~/libs/js/language/cn.js")"></script>
<script type="text/javascript" charset="utf-8" src="@Url.Content("~/libs/js/framework.js")"></script>
<link href="@Url.Content("~/libs/css/import_basic.css")" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" id="skin" />
<!--框架必需end-->

<!--数据表格start-->
<script type="text/javascript" charset="utf-8" src="@Url.Content("~/libs/js/table/quiGrid.js")"></script>
<!--数据表格end-->
<script type="text/javascript" src="@Url.Content("~/libs/js/popup/dialog.js")"></script>
<link href="@Url.Content("~/libs/skins/blue/style.css")" rel="stylesheet" type="text/css" id="theme" themecolor="green" positiontarget="positionContent" />
<div class="main">
    <ul class="mainMenu" id="mainMenu">
        <li class="func"><i></i><a href="@Url.Action("Index", "Fun")">功能库</a></li>
        <li class="app"><i></i><a href="@Url.Action("Index", "App")">应用库</a></li>
        <li class="active set"><i></i><a href="@Url.Action("Index", "Cls")">应用分类维护</a></li>
    </ul>
    <div class="content">
        <!-- end leftTree -->
        <div class="rightCon" style="width: 980px;">
            <div class="rightCon-tit">
                <h1>应用分类维护</h1>
            </div>
            <div class="maintain">
                <div class="search">
                    <div>
                        @*                        <label for="" class="ml20">菜单名称:</label><input type="text" class="input mr20" style="width: 200px;height: 35px;">
                        
                        <input type="button" class="btn" value="查   询">
                        <input type="button" class="btn" value="重   置">*@
                        <input type="button" class="btn add" value="添加一级分类" style="margin-left: 20px;" onclick="onAdd(0, -1);">
                    </div>

                    <div class="buttons">
                    </div>
                </div>
                <div class="m-container">
                    <div id="maingrid"></div>
                </div>
            </div>
            <!-- end maintain -->
        </div>
        <!-- end rightCon -->
    </div>
    <!-- end content -->
</div>

<script type="text/javascript">
    var g;
    function initComplete() {
        g = $("#maingrid").quiGrid({
            columns: [
                { display: '分类名称', name: 'ClsName', id: 'ClsId', width: 400, align: 'left' },
                { display: '创建时间', name: 'CreateTime', width: 250, align: 'center' },
                {
                    display: '操作', isAllowHide: false, align: 'center', width: "250",
                    render: function (rowdata, rowindex, value, column) {
                        var str = '<div class="padding_left5"><span class="icon_add hand" title="新增子级" onclick=onAdd("' + rowdata.ClsId + '","' + rowdata.ClsDepth + '","' + rowindex + '")>新增子级</span>  ';
                        if (rowdata.id != -1 && rowdata.id != 0) {
                            str += '<span class="icon_edit hand" title="修改" onclick=onEdit("' + rowdata.ClsId + '","' + rowdata.ClsName + '","' + rowindex + '")>修改</span>  '
                            str += '<span class="icon_delete hand" title="删除" onclick=onDelete("' + rowdata.ClsId + '","' + rowindex + '")>删除</span> '
                        }

                        str += '</div>';
                        return str;
                    }

                }
            ],
            data: {@Html.Raw(ViewBag.TreeData) },
            height: '450', width: "100%", headerRowHeight: '40', rowHeight: '33', checkbox: false, usePager: false, autoCheckChildren: false, tree: { columnId: 'ClsId' }
        });
    }
    var rowindexs;
    /*新增*/
    function onAdd(id, depth, rowindex) {
        if (depth > 2) {
            alert('最多只能添加三级分类');
            return;
        }
        rowindexs = rowindex;
        top.Dialog.open({
            URL: "@Url.Action("Info", "Cls")" + "?clsId=" + id + "&type=add&userid=@ViewBag.UserId&clsName=",
            Title: "新增分类",
            Width: 450,
            Height: 200
        });

    }
    /*修改*/
    function onEdit(id, clsName, rowindex) {
        rowindexs = rowindex;
        top.Dialog.open({
            URL: "@Url.Action("Info", "Cls")" + "?clsId=" + id + "&type=edit&userid=@ViewBag.UserId&clsName=" + clsName,
            Title: "修改分类",
            Width: 450,
            Height: 200
        });
    }
    /*删除*/
    function onDelete(id, rowindex) {
        if (confirm("您确定要删除选中的分类吗?")) {
            $.post("@Url.Action("Del", "Cls")", { clsId: id }, function (data) {
                if (data.toString() == "-1") {
                    alert("该分类已被关联或使用,无法执行删除操作!");

                } else if (data.toString() == "-2") {
                    alert("该分类下还有子级分类,请先删除!");

                } else if (data.toString() == "1") {
                    alert("操作成功!");
                    deleteGridRow(rowindex);

                } else {
                    alert("操作失败,请与管理员联系!");
                }
            }, "text");
        }
    }


    function deleteGridRow(rowindexs) {

        var row = g.getRow(rowindexs);
        var parent = g.getParent(row);
        var sister = g.getChildren(g.getParent(row));
        g.deleteRow(row);
        if (sister.length == 1) {
            parent.isParent = false;
            parent._hasChildren = false;
            parent.iconClass = "icon_star";
            parent.open = false;
        }
        g.reRender(g.records);
    }

    function addOrUpdateRow(type, clsId, clsName, parentId, createTime) {

        var row = g.getRow(rowindexs);
        var childs = g.getChildren(row);
        var sister = g.getChildren(g.getParent(row));
        if (type == "add") { //新增并且展开 或者 新增下面无子节点
            //设置父级的相关属性
            row.isParent = true;
            row._hasChildren = true;
            row.open = true;
            row.iconClass = "icon_star";

            //获取位置
            var child = null;
            var isdown = false;

            //根据参数获得一个rowdate
            var rowData = {
                ClsId: clsId,
                ClsName: clsName,
                CreateTime: createTime,
                ClsParentId: parentId,

                iconClass: "icon_star"
            }
            //将rowdate新增进g
            g.appendRow(rowData, row, child, true);
            //如果是最大数字

            g.expand(row);


        } else if (type == "edit") { //修改

            ClsId = clsId,
            ClsName = clsName,
            CreateTime = createTime,
            ClsParentId = parentId,

            g.reRender(g.records);
        }
        //重新渲染

    }
    function refershList() {

    }
</script>

后台构建树型菜单JSON数据代码如下:

public ActionResult Index()
        {
            ViewBag.TreeData = GetAppClsList();
            ViewBag.UserId = "";
            return View();
        }

public String GetAppClsList()
        {

            List<D_AppCls> List = _clsBll.GetAppClsList();
            string data = JsonHelper.ConvertToJson(List).Replace("\"", "\"");
            string json = String.Format("\"{0}\":{1}", "rows", data);
            return json;
        }

/// <summary>  
        /// 转换JSON对象集合,包含子集,递归加载  
        /// </summary>  
        /// <param name="companyList"></param>  
        /// <returns></returns>  
        public static string ConvertToJson(List<D_AppCls> companyList)
        {
            string json = "[";
            //获取第一级目录  
            List<D_AppCls> rootList = companyList.Where(x => x.ClsParentId==0).ToList<D_AppCls>();
            foreach (D_AppCls root in rootList)
            {
                string js = ConvertToJson(root);
                string children = "";
                children = DiGui(companyList, children, root.ClsId);
                json += "{" + string.Format(js, children) + "},";
            }
            if (json.LastIndexOf(",") < 1)
            {
                json += "]";
            }
            else
            {
                json = json.Substring(0, json.Length - 1) + "]";
            }
            return json.Replace(",children:[]", null);
        }

        /// <summary>  
        /// 递归调用添加包含子集的JSON数组  
        /// </summary>  
        private static string DiGui(List<D_AppCls> companyList, string children, int pid)
        {
            children = "[";
            List<D_AppCls> childerList = companyList.Where(x => x.ClsParentId == pid).ToList<D_AppCls>();
            foreach (D_AppCls item in childerList)
            {
                string js = ConvertToJson(item);
                string cd = "";
                cd = DiGui(companyList, cd, item.ClsId);
                children += "{" + string.Format(js, cd) + "},";
            }
            if (children.LastIndexOf(",") < 1)
            {
                children += "]";
            }
            else
            {
                children = children.Substring(0, children.Length - 1) + "]";
            }
            return children;
        }

当然还有其它各种实现方法,如直接指定父子项的字段,交给前端UI来处理层级关系(ztree控件),但这种方式更为灵活,可以指定多列数据属性的显示,还可以控制菜单项的状态等,留给我们更多的开发和定制余地。

树形菜单Ajax实现

  • 2009年09月02日 16:55
  • 497KB
  • 下载

主题:QUI框架V3.3版本正式发布!

这次V3.3是在V3.2基础上耗时半年完成。可以说完全达到了精品的程度:) 同时网站也改版了,访问地址仍然是:...
  • u013681996
  • u013681996
  • 2014年09月12日 09:26
  • 727

web框架帮助文档

  • 2012年11月29日 09:01
  • 8.28MB
  • 下载

QUI页面组件框架

  • 2013年03月08日 16:39
  • 8.28MB
  • 下载

【ztree系列】节点的增删改

一直以来,项目中用到的树形结构,都是用来读取显示数据、或者控制页面上其它内容的展示。对于树数据源的修改,一般由其它模块来完成,这样可以让功能单一化,不必让树的职责过多,但是却不得不再多加一步了。为了给...
  • chenyanmoting
  • chenyanmoting
  • 2016年01月09日 12:44
  • 18454

zTree树节点的增删改查。

acurl是我为删除提供的一个数据库字段。可以把它当做一个标示码,这个码的规律是当前节点的所有上级节点id,组成。 目的是为了实现都层级关系时删除中间节点,级联删除他下面的所有节点,一般情况删除最后...
  • Maxwell_Chia
  • Maxwell_Chia
  • 2015年01月09日 08:12
  • 5076

ztree实现部门增删改查

  • 2015年09月17日 10:19
  • 6KB
  • 下载

实现web树

在我的博客数据库表的设计——自连接表的设计中,用一个商品分类表来说明怎样去设计一个无限极分类的表。如果我们要使用这样的一个无限极分类的表来实现web树,不可避免就要递归,如果树的层次很深,那么递归的次...
  • yerenyuan_pku
  • yerenyuan_pku
  • 2016年09月01日 12:33
  • 2692

ajax异步请求数据,用bootstrap中的tree模板实现tree

后台数据格式json数据data: {"0":[{"id":1,"fatherId":0,"typeName":"测试","typeIndex":0,"typeStatus":"1"}], "1"...
  • u014051010
  • u014051010
  • 2015年11月13日 15:30
  • 4381

用Ajax技术让IE Web Control Tree View实现大数据量读取

相信不少人都用过微软提供的一款控件: IEControl, 其中的TreeView使用比较广泛。在我参与的一个项目中,一个名为UNSPSC的模块将频繁使用这个控件。这个控件在一般情况下相当好用(节点小...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年04月28日 21:44
  • 1675
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:树型菜单数据项AJAX实现增删改查
举报原因:
原因补充:

(最多只允许输入30个字)