zoukankan html css js c++ java

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;
            }
        }
    }
}

查看全文

相关阅读:
远程培训数据库迁移
 RMAN系列catalog数据库
 RMAN系列表空间恢复
 典型的一周备份脚本
 [转载]对 Oracle 备份与恢复的补充说明转自tianlesoft的文章
 RMAN系列基于scn恢复
 使用Profile对用户Session会话进行资源限制
 RMAN系列控制文件、数据文件、redolog全部丢失
 全自动 TSPITR基于RMANLOGSEQ
Oracle 10g EXPDP和IMPDP使用说明

原文地址：https://www.cnblogs.com/wangzhenghua/p/4226266.html