• Jquery EasyUI Tree .net实例


    图片:

    针对tree:

    数据库:

    CREATE TABLE [dbo].[SystemModel](
        [Id] [int] IDENTITY(1,1) NOT NULL,
        [Name] [nvarchar](50) NULL,
        [FatherId] [int] NULL,
        [module_url] [nvarchar](100) NULL,
        [module_order] [nchar](10) NULL,
     CONSTRAINT [PK_SystemModel] PRIMARY KEY CLUSTERED 
    (
        [Id] ASC
    )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
    ) ON [PRIMARY]

    html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>DataGrid教程</title>
        <script src="Scripts/jquery.min.js" type="text/javascript"></script>
        <script src="Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
        <script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
        <link rel="Stylesheet" type="text/css" href="Styles/themes/icon.css" />
        <link rel="Stylesheet" type="text/css" href="Styles/themes/default/easyui.css" />
        <script type="text/javascript">
            $(document).ready(
            function () {
                $("#QuestionList").datagrid(
                {
                    title: "问卷列表",
                    url: "Handler.ashx",
                    columns: [[
                { field: "Id", title: "编号",  "100" },
                { field: "Title", title: "题目",  "200" },
                { field: "Remark", title: "备注",  "200" }
    
                ]],
                    rownumbers: true, //行号      
                    singleSelect: false, //是否单选  
                    pagination: true//分页控件 
                }
                );
                var p = $('#QuestionList').datagrid('getPager');
                $(p).pagination({
                    pageSize: 10, //每页显示的记录条数,默认为10           
                    pageList: [10, 20, 50], //可以设置每页记录条数的列表           
                    beforePageText: '', //页数文本框前显示的汉字           
                    afterPageText: '页    共 {pages} 页',
                    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
                });
                //针对tree
                $(".easyui-tree").tree({
                    onClick: function (node) {
                        if ($('.easyui-tree').tree('isLeaf', node.target)) {
    
                            alert('打开页');
                            addTab(node.text, node.attributes);
                        }
                    }
                });
                //下面针对search搜索框 
                $('#search').searchbox({
                    searcher: function (value, name) {
                        $.post("add.ashx?type=search", { val: value }, function (result) {
                            alert(result);
                            $('#QuestionList').datagrid('loadData', result);
                        }, 'json');
                    },
                    prompt: '请输入值'
                });
                //下面是针对easyui-dialog
                $("#QuestionInfo").dialog(
                {
                    title: "问卷信息",
                     '900',
                    height: '600',
                    iconCls: 'icon-edit',
                    // href: 'QueationInfo.htm',
                    modal: true,
                    closed: true,
                    buttons: [{
                        text: '保存',
                        iconCls: 'icon-ok',
                        handler: function () {
    
                            $("#QInfo").form('submit', {
                                url: url,
                                onSubmit: function () {
                                    return $(this).form('validate');
                                },
                                success: function (result) {
                                    var result = eval('(' + result + ')');
                                    if (result.errorMsg) {
                                        $.messager.show({
                                            title: '错误信息',
                                            msg: result.errorMsg
                                        });
                                    } else {
                                        $('#QuestionInfo').dialog('close');
                                        $('#QuestionList').datagrid('reload');
                                    }
                                }
                            });
                        }
                    }, {
                        text: '取消',
                        iconCls: 'icon-cancel',
                        handler: function () {
                            $('#QuestionInfo').dialog('close');
                        }
                    }]
                }
                );
    
            }
            );
            function Add() {
                $("#QuestionInfo").dialog("open");
                url = 'Add.ashx?type=add';
            }
            function edit() {
                var row = $('#QuestionList').datagrid('getSelected');
                if (row) {
    
                    $('#QuestionInfo').dialog('open').dialog('setTitle', '编辑');
                    $('#QInfo').form('load', row);
                    url = 'Add.ashx?type=edit';
                }
                else {
                    alert('请选择行');
                }
            }
            function Del() {
                $.messager.confirm('确认', '你确认要删除该记录吗?', function (r) {
                    if (r) {
    
                        var row = $('#QuestionList').datagrid('getSelected');
                        if (row) {
                            url = 'Add.ashx?type=del&&Id=' + row.Id;
                            $.post('Add.ashx?type=del', { Id: row.Id },
                            function (result) {
                                if (result.status == 1) {
                                    $('#QuestionList').datagrid('reload');
                                } else {
                                    $.messager.alert('错误', result.msg, 'error');
                                }
                            }, 'json'
                            );
    
                        }
                        else {
                            alert('请选择行');
                        }
                    }
                });
    
            }
            function addTab(title, url) {
                if ($('#tt').tabs('exists', title)) {
                    $('#tt').tabs('select', title);
                } else {
                    var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="100%;height:100%;"></iframe>';
                    $('#tt').tabs('add', {
                        title: title,
                        content: content,
                        closable: true
                    });
                }
            }
        </script>
    </head>
    <body class="easyui-layout">
        <div data-options="region:'north',border:false" style="height: 60px; background: #B3DFDA;
            padding: 10px">
            north region</div>
        <div data-options="region:'west',split:true,title:'West'" style=" 200px; padding: 10px;">
            <ul class="easyui-tree" data-options="url:'Tree.ashx',method:'get',animate:true">
            </ul>
        </div>
        <div data-options="region:'south',border:false" style="height: 50px; background: #A9FACD;
            padding: 10px;">
            south region</div>
        <div data-options="region:'center'" id="tt" class="easyui-tabs">
            <div title="Home">
                <div id="toolbar">
                    <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="Add()">
                        添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="edit()">
                            编辑</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="Del()">
                                删除</a>
                    <input id="search" />
                </div>
                <table id="QuestionList">
                </table>
                <div id="QuestionInfo">
                    <form id="QInfo" method="post">
                    <input type="hidden" name="Id" />
                    <p>
                        标题:<input id="Title" name="Title" /></p>
                    <p>
                        <!--  form取值针对的是name-->
                        备注:<input id="Remark" name="Remark" /></p>
                    </form>
                </div>
            </div>
        </div>
    </body>
    </html>

     后台tree获取json

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Wzh.Model;
    using Wzh.BLL;
    using System.Text;
    namespace Web
    {
        /// <summary>
        /// Tree 的摘要说明
        /// </summary>
        public class Tree : IHttpHandler
        {
            StringBuilder result = new StringBuilder();
            StringBuilder sb = new StringBuilder();
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                GetTreeJsonByList(new SystemModelBLL().GetModelList("1=1"),0);
                context.Response.Write(result.ToString());
                context.Response.End();
            }
            //根据List生成EasyUI Tree Json树结构  
        
            public void GetTreeJsonByList(IList<SystemModelModel> Models, int Pid)
            {
                result.Append(sb.ToString());
                sb.Clear();
                //查询所有字节点
                IEnumerable<SystemModelModel> Infos = Models.Where(n => n.FatherId == Pid);
                if (Models.Count > 0)
                {
                    sb.Append("[");
                    if (Infos.Count() > 0)
                    {
                        foreach (var n in Infos)
                        {
                            sb.Append("{"id":"" + n.Id + "","text":"" + n.Name + "","attributes":"" + n.module_url + """);
                            IEnumerable<SystemModelModel> temp = Models.Where(p => p.FatherId == n.Id);
                            if (temp.Count() > 0)
                            {
                                sb.Append(","state":"closed","children":");
                                GetTreeJsonByList(Models, n.Id);
                                result.Append(sb.ToString());
                                sb.Clear();
                            }
                            result.Append(sb.ToString());
                            sb.Clear();
                            sb.Append("},");
                        }
                        sb = sb.Remove(sb.Length - 1, 1);   
                    }
                    sb.Append("]");
                    result.Append(sb.ToString());
                    sb.Clear();   
                }
           
            }
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }
  • 相关阅读:
    sed命令
    python常用库
    python标准库
    从 Python 打包到 CLI 工具
    pip
    python包自我理解
    docker常用命令
    chattr命令
    xmss
    live2d-widget.js
  • 原文地址:https://www.cnblogs.com/wangzhenghua/p/4226266.html
Copyright © 2020-2023  润新知