[html][easyui]DataGrid 绑定

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>

    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="js/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="js/themes/color.css">

    <link rel="stylesheet" type="text/css" href="js/demo/demo.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>

</head>

<body>

    <h2>

        Basic CRUD Application</h2>

    <p>

        Click the buttons on datagrid toolbar to do crud actions.</p>

    <table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; height: 250px"

        url="JsonHandler.ashx?type=data" toolbar="#toolbar" pagination="true" rownumbers="true"

        fitcolumns="true" singleselect="true">

        <thead>

            <tr>

                <th field="firstname" width="50">

                    First Name

                </th>

                <th field="lastname" width="50">

                    Last Name

                </th>

                <th field="phone" width="50">

                    Phone

                </th>

                <th field="email" width="50">

                    Email

                </th>

            </tr>

        </thead>

    </table>

    <div id="toolbar">

        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"

            onclick="newUser()">New User</a> <a href="javascript:void(0)" class="easyui-linkbutton"

                iconcls="icon-edit" plain="true" onclick="editUser()">Edit User</a> <a href="javascript:void(0)"

                    class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyUser()">

                    Remove User</a>

    </div>

    <div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px"

        closed="true" buttons="#dlg-buttons">

        <div class="ftitle">

            User Information</div>

        <form id="fm" method="post" novalidate>

        <div class="fitem">

            <label>

                First Name:</label>

            <input name="firstname" class="easyui-textbox" required="true">

        </div>

        <div class="fitem">

            <label>

                Last Name:</label>

            <input name="lastname" class="easyui-textbox" required="true">

        </div>

        <div class="fitem">

            <label>

                Phone:</label>

            <input name="phone" class="easyui-textbox">

        </div>

        <div class="fitem">

            <label>

                Email:</label>

            <input name="email" class="easyui-textbox" validtype="email">

        </div>

        </form>

    </div>

    <div id="dlg-buttons">

        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="saveUser()"

            style="width: 90px">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton"

                iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width: 90px">

                Cancel</a>

    </div>

    <script type="text/javascript">

        var url;

        function newUser(){

            $('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');

            $('#fm').form('clear');

            url = 'JsonHandler.ashx?type=add';

        }

        function editUser(){

            var row = $('#dg').datagrid('getSelected');

            if (row){

                $('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');

                $('#fm').form('load',row);

                url = 'JsonHandler.ashx?type=edit&id='+row.id;

            }

        }

        function saveUser(){

            $('#fm').form('submit',{

                url: url,

                onSubmit: function(){

                    return $(this).form('validate');

                },

                success: function(result){

                    var result = eval('('+result+')');

                    if (result.errorMsg){

                        $.messager.show({

                            title: 'Error',

                            msg: result.errorMsg

                        });

                    } else {

                        $('#dlg').dialog('close');        // close the dialog

                        $('#dg').datagrid('reload');    // reload the user data

                    }

                }

            });

        }

        function destroyUser(){

            var row = $('#dg').datagrid('getSelected');

            if (row){

                $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){

                    if (r){

                        $.post('JsonHandler.ashx',{type:'del',id:row.id,random:Math.random()},function(re){

                            var result = eval("("+re+")");

                            if (result.success){

                                alert('');

                                $('#dg').datagrid('reload');    // reload the user data

                            } else {

                                $.messager.show({    // show error message

                                    title: 'Error',

                                    msg: result.errorMsg

                                });

                            }

                        },'json');

                    }

                });

            }

        }

    </script>

    <style type="text/css">

        #fm

        {

            margin: 0;

            padding: 10px 30px;

        }

        .ftitle

        {

            font-size: 14px;

            font-weight: bold;

            padding: 5px 0;

            margin-bottom: 10px;

            border-bottom: 1px solid #ccc;

        }

        .fitem

        {

            margin-bottom: 5px;

        }

        .fitem label

        {

            display: inline-block;

            width: 80px;

        }

        .fitem input

        {

            width: 160px;

        }

    </style>

</body>

</html>

using System;

using System.Collections;

using System.Data;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using Newtonsoft.Json;

namespace Web

{

    /// <summary>

    /// $codebehindclassname$ 的摘要说明

    /// </summary>

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    public class JsonHandler : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            if (context.Request.Params != null && context.Request.Params.Count > )

            {

                string type = context.Request.Params["type"];

                if (!string.IsNullOrEmpty(type))

                {

                    if (type == "del")

                    {

                        // do something

                        context.Response.Write(JsonConvert.SerializeObject("{'success':'true'}"));

                    }

                    else if (type == "data")

                    {

                        // 根据参数 page / rows / offset 返回相应数据

                        DataTable dt = new DataTable();

                        dt.Columns.Add("firstname");

                        dt.Columns.Add("lastname");

                        dt.Columns.Add("phone");

                        dt.Columns.Add("email");

                        dt.Columns.Add("id");

                        DataRow dr = dt.NewRow();

                        dr[] = "X";

                        dr["id"] = ;

                        dt.Rows.Add(dr);

                        dr = dt.NewRow();

                        dr[] = "Y";

                        dr["id"] = ;

                        dt.Rows.Add(dr);

                        context.Response.Write(JsonConvert.SerializeObject(dt));

                    }

                    else if (type == "add")

                    {

                        // 执行 SQL 语句增加行到 DataTable

                        context.Response.Write("\"{'success':'true'}\"");

                    }

                    else if (type == "edit")

                    {

                        // 执行 SQL 语句修改 DataTable

                        context.Response.Write("\"{'success':'true'}\"");

                    }

                    else

                    {

                        // 输出错误

                        context.Response.Write(JsonConvert.SerializeObject("{'errorMsg':'没有相关参数！'}"));

                    }

                }

                else

                {

                    // 输出错误

                    context.Response.Write("\"{'errorMsg':'没有参数！'}\"");

                }

            }

            else

            {

                // 输出错误

                context.Response.Write("\"{'errorMsg':'没有请求参数！'}\"");

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

[html][easyui]DataGrid 绑定的更多相关文章

easyui datagrid 绑定json对象属性的属性
今天用easyui 的datagrid绑定数据时,后台提供的数据是实体类类型的,其中有一个实体类A的属性b是另一个实体类B类型的,而前台需要显示b的属性c,这下就悲剧了,前台没法直接绑定了,后来脑筋一 ...
easyui datagrid 绑定从后台得到的复杂的特殊数据结构
由于项目需要,从后台得到的数据统一为了类似{state:xxx,data:xxx,message:xxx}类型但是easyui datagrid却只认{total:xxx,rows:xxx}...所 ...
Easyui datagrid 绑定本地Json数据
var jsonstr = '{"total":1,"rows":[{"id":"M000005","name ...
Easyui datagrid绑定数据，新增，修改，删除方法(一)
@{ ViewBag.Title = "UsersList"; } <script type="text/javascript"> $(functi ...
Easyui datagrid绑定数据，新增，修改，删除写法
@{ ViewBag.Title = "xw_xsfl"; } <script type="text/javascript"> var editIn ...
EasyUi DataGrid 绑定数据格式问题
如果显示汇总记录则需设置页脚属性:首先设置showFooter:true, 然后后台计算出合计数据,一起传过来,类似如下:{"total":28,"rows": ...
EasyUI DataGrid定制默认属性名称
EasyUI DataGrid绑定服务器返回Json数据的解决方案 1. 服务器返回的数据对象格式,及初始化返回值 public class RequestResult { private int c ...
EasyUI datagrid 明细表格中编辑框事件绑定及灵活计算可根据此思路扩展其他
原创 : EasyUI datagrid 明细表格中编辑框事件绑定及灵活计算可根据此思路扩展其他转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框事件绑 ...
easyUI之datagrid绑定后端返回数据的两种方式
先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...

随机推荐

tomcat config https 443
设置https: <Connector port="443" protocol="HTTP/1.1" SSLEnabled="true" ...
数据结构与算法（python版）教程
算法的性质算法的描述算法的设计与分析
雷林鹏分享：Ruby 发送邮件 - SMATP
Ruby 发送邮件 - SMATP SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式. ...
django网站
https://www.djangoproject.com/download/ 指定版本安装django命令:pip install Django==1.11.8
uva10655矩阵快速幂
a^(n+2)+b^(n+2)=(a+b)*(a^(n+1)+b^(n+1))-a*b*(a^n+b^n) 坑爹的题目关系式都推出来了居然还是wa了..... 不能只看p,q=0就退出,因为a,b不一 ...
JavaScript学习总结(二十二)——JavaScript屏蔽Backspace键
今天在IE浏览器下发现,当把使用readonly="readonly"属性将文本框设置成只读<input type="text" readonly=&qu ...
plsql安装图解
Plsqldev安装步骤
window和Linux下Redis的安装及运行
Window篇 Redis的官方目前公开的版本分为三个类别Stable.Beta和Unstable.这些版本一般只是针对Linux.Unix内核的系统,虽然官方的不支持Window系统,但是微软开源 ...
New Concept English Two 27 73
新概念一:对应小学水平,重在口语和基础.是不可多得的学习教材,全本144课,可以给孩子(hello world 级别的我)学半年.新概念二:对应高中水平,重在听力和场景对话,共96课,学后,听懂歪果仁 ...

[html][easyui]DataGrid 绑定

[html][easyui]DataGrid 绑定的更多相关文章

随机推荐

热门专题