jqery easyui 利用treeview实现菜单的增删改查

最新推荐文章于 2023-02-01 08:50:51 发布

qq_32508663

最新推荐文章于 2023-02-01 08:50:51 发布

阅读量1.6k

点赞数

分类专栏： easyui框架文章标签： easyui treeview

本文链接：https://blog.csdn.net/qq_32508663/article/details/65938101

版权

本文介绍如何利用jQuery EasyUI的TreeView组件进行菜单的增删改查操作，重点在于后台的查询展示和保存方法，特别是使用递归处理数据。

摘要由CSDN通过智能技术生成


****cshtml代码****


@{
    ViewBag.Title = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic TreeGrid - jQuery EasyUI Demo</title>
    @*<link rel="stylesheet" type="text/css" href="~/Content/js/Menu/easyui.css">
        <link rel="stylesheet" type="text/css" href="~/Content/js/Menu/icon.css">
        <link rel="stylesheet" type="text/css" href="~/Content/js/Menu/demo.css">
        <script type="text/javascript" src="~/Content/js/Menu/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="~/Content/js/Menu/jquery.easyui.min.js"></script>*@
</head>

<body>

    <table id="tg"></table>

</body>
</html>



<script type="text/javascript">


    $(function () {
    


        //function onEndEdit(index, row) {
    
        //    debugger;
        //    var ed = $(this).datagrid('getEditor', {
    
        //        index: index,
        //        field: 'IsEnable'
        //    });
        //    debugger;
        //    row.IsEnable = $(ed.target).checkbox('getChecked');
        //    row.IsOpen = true;

        //    //row.productname = $(ed.target).combobox('getText');
        //};

        $('#tg').treegrid({
            url: '/Menu/GetNavgitionData',
            idField: 'BaseId',
            treeField: 'Name',
            iconCls: 'icon-ok',
            state: 'closed',
            rownumbers: true, //行号
            animate: true,   //点击节点的动画效果
            collapsible: true,//定义是否可折叠按钮
            fitColumns: true,    //    置为true将自动使列适应表格宽度以防止出现水平滚动。
            showFooter: true,//定义是否显示行底（如果是做统计表格，这里可以显示总计等）。
            striped: false,//设置为true将交替显示行背景。
            onDblClickRow: function (row) {
     edit() },//双击节点是触发
            //onClickRow: function (row) { save() },//点击节点时触发
            columns: [[

                { field: 'Name', title: '模块名称', editor: 'text', width: 180 },
                { field: 'Domain', title: '导航领域', editor: 'text', width: 150 },
                { field: 'Path', title: '跳转路径',