Jquery EasyUI DataGrid .net实例

心已入冬 提交于 2020-04-03 04:46:49
前台界面:<!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: "编号", width: "100" },
            { field: "Title", title: "题目", width: "200" },
            { field: "Remark", title: "备注", width: "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} 条记录'
            });
            //下面是针对easyui-dialog
            $("#QuestionInfo").dialog(
            {
                title: "问卷信息",
                width: '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;
                        //                        alert(url);
                        //                        $.ajax({
                        //                            contentType: "application/json",
                        //                            type: "post",
                        //                            dataType: "json",
                        //                            url: 'Add.ashx',
                        //                            data: "{'type':'del','Id':" + row.Id + "}",
                        //                            sucess: function (msg) {
                        //                                alert('dd');
                        //                            }

                        //                        });
                        $.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('请选择行');
                    }
                }
            });

        }
    </script>
</head>
<body>
    <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>
    </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>
</body>
</html>

处理页:

1.得到List列表

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string result = "";
            string Title = context.Request["page"];

            string a = Title;
            if (a == "1")
            {
                IList<QuestionModel> Infos = new QuestionBLL().GetModelList(" id<10 ");
                result = JsonConvert.SerializeObject(Infos);
            }
            else
            {
                IList<QuestionModel> Infos = new QuestionBLL().GetModelList("id>9 and id<100 ");
                result = JsonConvert.SerializeObject(Infos);
            }
            //总记录数total
            //构造json
            result = "{\"total\":100,\"rows\":"+result+"}";
            context.Response.Write(result);
        }

2.增加修改删除

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Wzh.BLL;
using Wzh.Model;
using System.Text;
namespace Web
{
    /// <summary>
    /// Add 的摘要说明
    /// </summary>
    public class Add : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string type = context.Request["type"];
            StringBuilder result = new StringBuilder();
            if (type == "add")
            {
                int AddId = add(context); ;
                if (AddId == 0)
                {
                    result.Append("{\"errorMsg\":\"添加失败\"}");
                }
                else
                {
                    result.Append("{\"errorMsg\":false}");
                }

            }
            else if(type=="edit")
            {
                int EditId = Edit(context); ;
                if (EditId == 0)
                {
                    result.Append("{\"errorMsg\":\"编辑失败\"}");
                }
                else
                {
                    result.Append("{\"errorMsg\":false}");
                }
            }
            else if (type == "del")
            {
                if (!Del(Convert.ToInt32(context.Request["Id"])))
                {
                    result.Append("{\"sucess\":\"删除失败\"}");
                }
                else
                {
                    result.Append("{\"success\":true,\"status\":1}");
                }
            
            }
            context.Response.Write(result.ToString());
        }
        public int add(HttpContext context)
        {

            string Title = context.Request["Title"];
            string Remark = context.Request["Remark"];
            QuestionModel Model = new QuestionModel();
            Model.Remark = Remark;
            Model.Title = Title;
            return new QuestionBLL().Add(Model);

        }
        public int Edit(HttpContext context)
        {
            int Id = 0;
            Id = Convert.ToInt32(context.Request["Id"]);
            string Title = context.Request["Title"];
            string Remark = context.Request["Remark"];
            QuestionModel Model = new QuestionModel();
            Model.Remark = Remark;
            Model.Title = Title;
            Model.Id = Id;
            new QuestionBLL().Update(Model);
            return Id;
        }
        public bool Del(int Id)
        {
           return new QuestionBLL().Delete(Id);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!