CYQ.Data 快速开发EasyUI
EasyUI：
前端UI框架之一， 相对ExtJs来说，算是小了，这两天，抽空看了下EasyUI的相关知识，基本上可以和大伙分享一下：
学习的话，基本上思路就三个：
一个是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 > )
{
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代码
<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="width:400px;"></div>
<script>
$(function () {
var value = $("#p").progressbar("getValue");
while (value < )
{
value += 0.1;
$("#p").progressbar("setValue",value);
}
}
);
</script>
<hr />--%>
<table id="dg" title="EasyUI+CYQ.Data" style="width: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="">ID </th>
<th field="UserName" width="">UserName</th>
<th field="CreateTime" width="">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="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>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:;
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>
总结：
1：EasyUI这个前端框架还是不错的，虽然商业使用是需要付费的，但是对公司来说小钱，而且多数小公司根本没打算交钱。
2：CYQ.Data 经过小调整，能够更简便的支持EasyUI开发。
3：如果你是用的开源版本V4.55，若需要支持EasyUI，JsonHelper类的输出，把Count变为Total，把data改成rows即可。
CYQ.Data 快速开发EasyUI的更多相关文章
- CYQ.Data 快速开发之UI（赋值、取值、绑定）原理
昨夜园子猴子问了几个我CYQ.Data使用的小问题,经过简单解答后,他表示“妈妈再也不用担心我的学习",并于事后以资鼓励,希望这框架越走越好. 除了技术上的交流,双方在生活,S上面的问题上也 ...
- 快速开发之代码生成器（asp.net mvc4 + easyui + knockoutjs）
一.前言 作为一个码农这么多年,一直在想怎么提高我们的编码效率,关于如何提高编码效率,我自己的几点体会 1.清晰的项目结构,要编写代码的地方集中 2.实现相同功能的代码量少并且清晰易懂 3.重复或有规 ...
- CYQ.Data V5 分布式缓存Redis应用开发及实现算法原理介绍
前言: 自从CYQ.Data框架出了数据库读写分离.分布式缓存MemCache.自动缓存等大功能之后,就进入了频繁的细节打磨优化阶段. 从以下的更新列表就可以看出来了,3个月更新了100条次功能: 3 ...
- Django+easyui 快速开发
Django的使用我们可以查看上一篇博客,今天我们要在Django中使用easyui快速开发,在我们安装好Django, 我们可以道改地址那一下easyui 官方API文档(http://downlo ...
- MVC通用控件库展示-MVC4.0+WebAPI+EasyUI+Knockout--SNF快速开发平台3.0
在我们开发中怎么才能提高效率,就是要有大量的公共组件(控件)可以直接使用而不用自己再开发一遍,既然是公共控件那也得简单实用才行.下面就介绍一下SNF-MVC当中的控件库. 总体控件库展示: 1.通用用 ...
- SNF快速开发平台3.0之BS页面展示和九大优点-部分页面显示效果-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout
一)经过多年的实践不断优化.精心维护.运行稳定.功能完善: 能经得起不同实施策略下客户的折腾,能满足各种情况下客户的复杂需求. 二)编码实现简单易懂.符合设计模式等理念: 上手快,见效快.方便维护,能 ...
- SNF快速开发平台3.0之-界面个性化配置+10种皮肤+7种菜单-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout
一.个性配置-首页:可以进行拖动保存配置,下次登录时就会按配置的进行加载 二.个人配置页面 7种菜单用户可自定义配置,和预览效果 10种皮肤自定义配置,和预览效果 皮肤和菜单可以随意组合-部分截图: ...
- CYQ.Data.Orm.DBFast 新增类介绍（含类的源码及新版本配置工具源码）
前言: 以下功能在国庆期就完成并提前发布了,但到今天才有时间写文介绍,主要是国庆后还是选择就职了,悲催的是上班的地方全公司都能上网,唯独开发部竟不让上网,是个局域网. 也不是全不能上,房间里有三台能上 ...
- CYQ.Data V5 从入门到放弃ORM系列：框架的优势
前言: 框架开源后,学习使用的人越来越多了,所以我也更加积极的用代码回应了. 在框架完成了:数据库读写分离功能 和 分布式缓存功能 后: 经过三天三夜的不眠不休,终于完成框架第三个重量级的功能:自动化 ...
随机推荐
- SqlServer -- 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时，才能为表'T_FM_AMTFLOW'中的标识列指定显式值。
SET IDENTITY_INSERT TABLE_NAME ON; INSERT INTO TABLE_NAME(XXX, XXX,..., XXX) SELECT XXX, XXX,..., XX ...
- ubantu16.04+mxnet +opencv+cuda8.0 环境搭建
ubantu16.04+mxnet +opencv+cuda8.0 环境搭建 建议:环境搭建完成之后,不要更新系统(内核) 转载请注明出处: 微微苏荷 一 我的安装环境 系统:ubuntu16.04 ...
- 【Java EE 学习 68】【单点登录】【两种单点登录类型:SSO/CAS、相同一级域名的SSO】
单点登录:SSO(Single Sign On) 什么是单点登录:大白话就是多个网站共享一个用户名和密码的技术,对于普通用户来说,只需要登录其中任意一个网站,登录其他网站的时候就能够自动登陆,不需要再 ...
- 小书翻译完成，分享啦--《用Python操作大数据[MapReduceHadoop和Spark]》
http://files.cnblogs.com/files/aguncn/%E7%94%A8Python%E6%93%8D%E4%BD%9C%E5%A4%A7%E6%95%B0%E6%8D%AE%5 ...
- PL/SQL客户端中执行insert语句，插入中文乱码
问题描述:在PL/SQL客户端中执行insert语句,插入中文乱码 解决方案: 1.执行脚本 select userenv('language') from dual; 结果为AMERICAN_ ...
- asp.net中获取本机的相关信息！（CPU、内存、硬盘序列号等）
// 注意:首先要在项目bin目录中添加引用 System.Management using System;using System.Collections.Generic;using System. ...
- 【转】SSL协议、SET协议、HTTPS简介
一.SSL协议简介 SSL是Secure Socket Layer的缩写,中文名为安全套接层协议层.使用该协议后,您提交的所有数据会首先加密后,再提交到网易邮箱,从而可以有效防止黑客盗取您的用户名.密 ...
- Delphi 关键字详解[整理于 "橙子" 的帖子]
absolute //它使得你能够创建一个新变量, 并且该变量的起始地址与另一个变量相同. var Str: ]; StrLen: Byte absolute Str; //这个声明指定了变量 ...
- 【第一课】WEBIX 入门自学-介绍WEBIX
Webix是跨浏览器.跨平台的JavaScript框架,使用JavaScript.CSS,HTML5技术构建交互式web应用程序.库中提供几十个完全可定制的组件,提供了JQuery集成和可以处理任何服 ...
- 华清远见成为ARM大学计划正式合作伙伴
来源:华清远见嵌入式学院 近日,华清远见教育集团成为ARM大学计划合作伙伴,这是ARM大学计划合作伙伴中的国内唯一教育机构.此次合作是ARM公司对华清远见教育集团的高度认可,也充分证明了华清远见这些年 ...