EasyUI:
前端UI框架之一, 相对ExtJs来说,算是小了,这两天,抽空看了下EasyUI的相关知识,基本上可以和大伙分享一下:
学习的话,基本上思路就三个:
一个是Demo,把所有提供的Controls看一遍,然后用到哪个,就去看哪个。
一个是Document,如果某个控件需要用JS编码控制,可能需要看一下相关的API提供的属性,事件和方法。
一个是搜相关的文章,看看一些网上的示例或教程文章。
由于EasyUI是基于JQ的语法,所以最好备有JQ的API手册。
EasyUI 易遇到的坑:
如下图,折腾基本的增删改查+分页(费了我不少时间,遇到几个坑):
基本用法,可以看官网的Demo,这里说下我遇到的几个问题:
1:分页和加载数据问题:
一开始由于不知道表格的需要的默认Json格式,所以只能动态绑定数据,大体代码如下:
然后又要另外把记录总数赋给分页控件:
折腾了N久后,发现了Json的格式,只要输出的Json格式按它的要求,只要指定url就可以了,分页控件也会自动绑定,输出的格式为:
其中total和rows数组是标配字段名,刚好CYQ.Data后台表格的输出代码是count和data,名称不一致,为了更方便支持easyui,只好把输出名改成一致了。
2:重复发送请求的问题:
当通过以下代码指定请求url时,发现请求发送了2次:
$("#dg").datagrid({
"url": "Json.ashx",
"pagination":true
});
});
后来寻得,把html中的class去掉即可。
变更为:
<table id="dg" title="My Users"
CYQ.Data 快速开发EasyUI:
为了与EasyUI配合的更方便,我对CYQ.Data框架的JsonHelper这个类小小调整了几个小点,使的开发更爽了一些。
1:数据加载与分页:
前端按EasyUI的Demo,而后端代码可以写成通杀式代码如下:
{
string json = string.Empty;
using (MAction action = new MAction(tName))
{
json=action.Select(pageIndex, pageSize, where).ToJson();//输出的格式直接迎合easyUI
}
return json;
}
一个URL过来,根据参数指定表名和条件直接返回,通杀。
2:新增加和更新通杀式代码:
{
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:删除通杀式代码:
{
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 < 100)
{
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="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="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: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>
总结:
1:EasyUI这个前端框架还是不错的,虽然商业使用是需要付费的,但是对公司来说小钱,而且多数小公司根本没打算交钱。
2:CYQ.Data 经过小调整,能够更简便的支持EasyUI开发。
3:如果你是用的开源版本V4.55,若需要支持EasyUI,JsonHelper类的输出,把Count变为Total,把data改成rows即可。
版权声明:本文原创发表于 博客园,作者为 路过秋天 本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。 |
个人微信公众号![]() |
Donation(扫码支持作者):支付宝:![]() |
Donation(扫码支持作者):微信:![]() |
![]() |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2010-09-03 CYQ.Data 轻量数据层之路 使用篇二曲 MAction 数据查询(十三)
2009-09-03 清除svn/vss小工具