CYQ.Data 快速开发EasyUI

CYQ.Data 快速开发EasyUI

EasyUI：

前端UI框架之一，相对ExtJs来说，算是小了，这两天，抽空看了下EasyUI的相关知识，基本上可以和大伙分享一下：

官网： http://www.jeasyui.com/

学习的话，基本上思路就三个：

一个是Demo，把所有提供的Controls看一遍，然后用到哪个，就去看哪个。

一个是Document，如果某个控件需要用JS编码控制，可能需要看一下相关的API提供的属性，事件和方法。

一个是搜相关的文章，看看一些网上的示例或教程文章。

由于EasyUI是基于JQ的语法，所以最好备有JQ的API手册。

EasyUI 易遇到的坑：

如下图，折腾基本的增删改查+分页（费了我不少时间，遇到几个坑）：

基本用法，可以看官网的Demo，这里说下我遇到的几个问题：

1：分页和加载数据问题：

一开始由于不知道表格的需要的默认Json格式，所以只能动态绑定数据，大体代码如下：

$.getJSON("json.ashx",function(result){$("#dg").datagrid("loadData",result.data);}

然后又要另外把记录总数赋给分页控件：

$.getJSON("json.ashx",function(result){$("#dg").datagrid("loadData",result.data);$("#db").datagrid("gerPager").pagination({"total":result.count});}

折腾了N久后，发现了Json的格式，只要输出的Json格式按它的要求，只要指定url就可以了，分页控件也会自动绑定，输出的格式为：

{"total":"42","errorMsg":"","success":"true","rows":[{"ID":"1","UserName":"22222","CreateTime":"2012/9/27 17:13:52"},{"ID":"2","UserName":"2","CreateTime":"2012/9/27 17:12:05"},{"ID":"3","UserName":"1","CreateTime":"2013/4/18 18:18:22"},{"ID":"7","UserName":"ttttttttttt","CreateTime":"2012/9/27 17:15:33"},{"ID":"8","UserName":"ttttttt","CreateTime":""},{"ID":"9","UserName":"999","CreateTime":""},{"ID":"10","UserName":"2222","CreateTime":""},{"ID":"11","UserName":"333","CreateTime":""},{"ID":"12","UserName":"44","CreateTime":""},{"ID":"13","UserName":"55","CreateTime":""}]}

其中total和rows数组是标配字段名，刚好CYQ.Data后台表格的输出代码是count和data，名称不一致，为了更方便支持easyui，只好把输出名改成一致了。

2：重复发送请求的问题：

当通过以下代码指定请求url时，发现请求发送了2次：

$(function () {
$("#dg").datagrid({
                    "url": "Json.ashx",
                    "pagination":true
                });
            });

后来寻得，把html中的class去掉即可。

<table id="dg" title="My Users" class="easyui-datagrid"
变更为：
<table id="dg" title="My Users"

CYQ.Data 快速开发EasyUI：
为了与EasyUI配合的更方便，我对CYQ.Data框架的JsonHelper这个类小小调整了几个小点，使的开发更爽了一些。

1：数据加载与分页：

前端按EasyUI的Demo，而后端代码可以写成通杀式代码如下：

public string OutJson(string tName, int pageIndex, int pageSize, string where)
        {
            string json = string.Empty;
            using (MAction action = new MAction(tName))
            {
                json=action.Select(pageIndex, pageSize, where).ToJson();//输出的格式直接迎合easyUI
            }
            return json;
        }

一个URL过来，根据参数指定表名和条件直接返回，通杀。
2：新增加和更新通杀式代码：

public string UpdateOrInsert(string tName,int id) //默认easyUI会自动Post数据过来，这里采用自动取值。
        {
            bool result = false;
            using (MAction action = new MAction(tName))
            {
                if (id > 0)
                {
                    result=action.Insert(true);
                }
                else
                {
                    result=action.Update(id, true);
                }
            }
            return JsonHelper.OutResult(result, result ? "" : "操作失败！");//新增的方法，配合easyUI需要的保存提示。
        }
3：删除通杀式代码：

public string Delete(string tName, int id)
        {
            bool result = false;
            using (MAction action = new MAction(tName))
            {
               result = action.Delete(id);
            }
            return JsonHelper.OutResult(result, result ? "" : "操作失败！");
        }

基本后台属于小调整就可以通杀了，基础的CRUD开发起来还是相当简单的。
补充：界面UI的HTML代码
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

    <script src="/easyui/jquery.min.js"></script>
    <script src="/easyui/jquery.easyui.min.js"></script>
</head>

<body>
<%--     <div id="p" class="easyui-progressbar" style="400px;"></div>
   <script>
        $(function () {
            var value = $("#p").progressbar("getValue");
            while (value < 100)
            {
                value += 0.1;
                $("#p").progressbar("setValue",value);
            }
        }
        );
    </script>
    <hr />--%>

   <table id="dg" title="EasyUI+CYQ.Data"  style="550px;height:250px"
        toolbar="#toolbar" closable="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>

           <%-- <th field="ID" width="50">ID            </th>
            <th field="UserName" width="50">UserName</th>
            <th field="CreateTime" width="50">CreateTime</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="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>UserName:</label>
                <input name="UserName" class="easyui-validatebox" required="true" />
            </div>
            <div class="fitem">
                <label>CreateTime:</label>
                <input name="CreateTime" />
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>

        <input type="button" onclick="search();" value="Search" />
        <script>
            //$.getJSON("json.ashx",function(result){$("#dg").datagrid("loadData",result.data);$("#db").datagrid("gerPager").pagination({"total":result.count});}
            var dg = $('#dg');
            var a = "1";
            var b = "2";
            var qp = { "a": a, "b": b };
            function search()
            {
                a = "2";
                b = "3";
                dg.datagrid("options").queryParams = { "a": a, "b": b };
                dg.datagrid("reload");
            }
            $(function () {
                dg.datagrid({
                    "url": "http://www.jeasyui.com/demo/main/get_users.php",
                    "queryParams": qp,
                    "pagination":true
                });
            });
            function newUser()
            {
                $("#dlg").dialog("open").dialog('setTitle', 'New User');;
                $('#fm').form('clear');
                url = 'json.ashx?t=1';
            }
            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 editUser()
            {
                var row = $('#dg').datagrid('getSelected');
                if (row) {
                    $('#dlg').dialog('open').dialog('setTitle', 'Edit User');
                    $('#fm').form('load', row);
                    url = 'json.ashx?t=2&id=' + row.id;
                }
            }
            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('json.ashx', { id: row.id }, function (result) {
                                if (result.success) {
                                    $('#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;
        }
    </style>
</body>
</html>
View Code
总结：
1：EasyUI这个前端框架还是不错的，虽然商业使用是需要付费的，但是对公司来说小钱，而且多数小公司根本没打算交钱。
2：CYQ.Data 经过小调整，能够更简便的支持EasyUI开发。
3：如果你是用的开源版本V4.55，若需要支持EasyUI，JsonHelper类的输出，把Count变为Total，把data改成rows即可。
相关阅读:
The 2019 ICPC Asia Shanghai Regional Contest H Tree Partition k、Color Graph
回溯法、子集树、排列树、满m叉树
 顺时针打印矩阵
 单调递增的数字
 nodejs
nodejs + express + mangodb 项目搭建
 nodejs + express 项目初始化
 星星评分功能(带小数点的那种，5颗星，10分制)
easyui 增加删除toolbar 显示异常问题
 sql 外键级联,触发器防删
原文地址：https://www.cnblogs.com/cyq1162/p/3297892.html

CYQ.Data 快速开发EasyUI

EasyUI：

EasyUI 易遇到的坑：

1：分页和加载数据问题：

2：重复发送请求的问题：

CYQ.Data 快速开发EasyUI：

1：数据加载与分页：

2：新增加和更新通杀式代码：

3：删除通杀式代码：

补充：界面UI的HTML代码

总结：