Jquery EasyUI 开发实录
有好几年没有用过EasyUI了，最近在外包做的一个项目中新增功能时，又用到了，本以为和按照以前那样用就可以了，可当我真正用的时候，发现许多地方不一样了，就连官网的文档都更新了，最突出的就是不知道什么时候起多了一个data-options属性。
记得，在过去一直都是用js直接调用的，现在突然变成data-options了，而官网给的Demo实在是太过简单，连url参数都是直接写死的，这肯定无法满足开发需求。没办法，只好先从官网过一下文档，然后慢慢摸索。因为浪费了我许多宝贵的时间，所以打算记录一下备忘用，也希望给大家参考。
站在使用者的角度而言，用这样的UI框架其实没什么技术含量，就是一边看文档，一边对着Demo改而已，要说难的地方，就是Demo不全，无法满足部分日常需求。
没有产品原型图，界面都是我意淫出来的，大家不要吐槽。
datagrid
需求：能够动态添加行、修改行、删除行、分页。
前台页面AddInvoice.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddInvoice.aspx.cs" Inherits="YYZB.WebsiteAdmin.YYZB.PZSSettlement.AddInvoice" Title="结算单发票" %> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/js/easyui/easyui.css" rel="stylesheet" />
<link href="../../js/easyui/icon.css" rel="stylesheet" />
<link href="/css/bootstrap-multiselect.css" rel="stylesheet" />
<style type="text/css">
.form-inline .form-control {
display: inline-block;
} label {
text-align: right;
cursor: pointer;
font-weight: lighter;
} span.red {
padding-left: 5px;
color: red;
} .form-inline {
padding: 5px 2px;
} input.form-control {
-webkit-box-shadow: none;
box-shadow: none;
} .glyphicon-stop:before {
content: "\e074";
} #roletable {
padding: 3%;
font-size: 16px;
} #roletable input[type="checkbox"] {
margin-left: 20px;
margin-right: 5px;
} .newInput {
width: 240px;
display: inline-block;
} .tdLeft {
width: 80px;
text-align: right;
}
.validatebox-text,.validatebox-invalid{height:20px;}
</style>
<!--引用脚本-->
<script src="/js/jquery-1.8.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/easyui/jquery.easyui.min.js"></script>
<script src="../../js/easyui/easyui-lang-zh_CN.js"></script>
<script src="/js/jquery.datagrid.js"></script>
<script src="/js/knockout/knockout-2.1.0.js"></script>
<script src="/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return "";
}
var _id;
$(function () {
_id = GetQueryString("id");
parent.$("#bootstrapDialog .modal-footer").find("button").eq(1).hide();
loaddatagrid();
});
var datagrid; //定义全局变量datagrid
function loaddatagrid() {
datagrid = $('#table').datagrid({
url: encodeURI("/YYZB/Tools/SettlementApi.aspx?action=GetInvoiceListBySetId&id=" + _id +
"&pageindex=" + _pageindex + "&pagesize=" + _pagesize + "&" + Math.random()),
columns: [[
{ field: 'Id', checkbox: true, width: 50, sortable: false },
{
field: 'InvoiceNo', title: '发票号', width: 160, sortable: true, editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'Remark', title: '备注', width: 240, sortable: true, editor: { type: 'validatebox' } }
]],
toolbar: [{
iconCls: 'icon-add',
text: '添加',
handler: function () { append() }
}, '-',
{
iconCls: 'icon-remove',
text: '删除',
handler: function () { removeit() }
}, '-',
{
iconCls: 'icon-save',
text: '保存',
handler: function () { accept() }
}, '-',
{
text: '修改', iconCls: 'icon-edit', handler: function () {
edit();
}
} , '-',
{
text: '取消编辑', iconCls: 'icon-redo', handler: function () {
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
cancleEdit();
}
}, '-'],
onReload: function () {
reload();
},
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit该方法触发此事件
saveChange(rowData);
editRow = undefined;
},
onDblClickRow: function (rowIndex, rowData) {
//双击开启编辑行
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
},
iconCls: 'icon-edit',
singleSelect: true,
pagination: true, //在 datagrid 的底部显示分页栏。
rownumbers: true, //显示行号的列
remoteSort: false //定义是否从服务器给数据排序。
});
} var editRow = undefined; //定义全局变量：当前编辑的行
function edit() {
//修改时要获取选择到的行
var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改，否则不操作
if (rows.length == 1) {
//修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//当无编辑行时
if (editRow == undefined) {
//获取到当前选择行的下标
var index = datagrid.datagrid("getRowIndex", rows[0]);
//开启编辑
datagrid.datagrid("beginEdit", index);
//把当前开启编辑的行赋值给全局变量editRow
editRow = index;
//当开启了当前选择行的编辑状态之后，
//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
}
}
}
function cancleEdit() {
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
function append() {
//添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {
}
});
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit", 0);
//给当前编辑的行赋值
editRow = 0;
}
}
function removeit() {
//删除时先获取选择行
var rows = datagrid.datagrid("getSelections");
//选择要删除的行
if (rows.length > 0) {
var editIndex = $('#table').datagrid('getRows').length - 1;
parent.$.fn.Confirm({
message: "确定要删除吗？",
callback: function () {
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].Id);
}
//将选择到的行存入数组并用,分隔转换成字符串
$.post("/YYZB/Tools/SettlementApi.aspx?action=RemoveInvoiceByIds", { ids: ids.join(','), SettlementId: _id }, function (data) {
var Json = eval('(' + data + ')');
if (Json.ok) {
//$('#table').datagrid('deleteRow', editIndex);
$("#table").datagrid('reload');
parent.$("#table").datagrid('reload');
//parent.$.fn.Alert({
// message: "删除成功！",
// timer: 0,
// callback: function () {
// parent.$("#table").datagrid('reload');
// $("#table").datagrid('reload');
// //parent.$("#bootstrapDialog").modal("hide");
// }
//});
}
else {
parent.$.fn.Alert({
message: "删除失败：" + Json.error,
callback: function () { }
});
}
})
}
});
}
else {
$.fn.Alert({
message: "请选择删除项！"
});
}
}
function accept() {
//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit", editRow);
}
function saveChange(rowData) {
var url = encodeURI("/YYZB/Tools/SettlementApi.aspx?action=InsertOrUpdateInvoice");
var msg = (rowData.Id == undefined || rowData.Id == "") ? "添加" : "修改";
$.post(url, { id: rowData.Id, InvoiceNo: rowData.InvoiceNo, Remark: rowData.Remark,SettlementId:_id }, function (data) {
var Json = eval('(' + data + ')');
if (Json.ok) {
parent.$("#table").datagrid('reload');
//parent.$.fn.Alert({
// message: msg+"成功！",
// timer: 0,
// callback: function () {
// parent.$("#table").datagrid('reload');
// //parent.$("#bootstrapDialog").modal("hide");
// }
//});
}
else {
parent.$.fn.Alert({
message: msg+"失败：" + Json.error,
callback: function () {
$("#table").datagrid('reload');
cancleEdit();
}
});
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="tab-content">
<table id="table" class="table table-striped table-bordered table-hover" title="已录入发票列表" style="width: 540px;"></table>
<div>
<input type="hidden" id="addInvoice" />
</div>
</div>
</form>
</body>
</html>
后台代码，没什么好说的，基本上就是按照官网给的Demo那样，构造Json格式的数据列表就可以了。
treegrid & tree
需求：结算单位匹配加盟商下面的社区。一个结算单位可以匹配多个加盟商，一个加盟商下面又多个社区。
说明：左侧待关联加盟店，其实就是系统的组织架构，一共分为3级，第1级是平台，第二级是城市公司，第三级是加盟商。只有加盟商，也就是叶子节点可以被选择。左侧选中的加盟商，点击>>可以移到右边，同样从右边选中加盟商也可以通过点击<<移到左边。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SettlementUnitOrgRelNew.aspx.cs" Inherits="YYZB.WebsiteAdmin.YYZB.PZSSettlement.SettlementUnitOrgRelNew" %> <!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 href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/js/easyui/easyui.css" rel="stylesheet" />
<link href="/css/bootstrap-multiselect.css" rel="stylesheet" /> <link href="/css/ace.min.css" rel="stylesheet" />
<link href="/css/ace-skins.min.css" rel="stylesheet" /> <link rel="stylesheet" href="/css/jquery-ui-1.10.3.full.min.css" />
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<%-- <script src="../../assets/js/ie-emulation-modes-warning.js"></script>--%> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<%-- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>--%> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--引用脚本-->
<script src="/js/jquery-1.8.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/easyui/jquery.easyui.min.js"></script>
<script src="/js/jquery.datagrid.js"></script>
<script src="/js/knockout/knockout-2.1.0.js"></script>
<script src="/js/bootstrap-multiselect.js"></script>
<%-- 自动属性脚本开始--%>
<script src="/js/ui/jquery.ui.core.js"></script>
<script src="/js/ui/jquery.ui.widget.js"></script>
<script src="/js/ui/jquery.ui.position.js"></script>
<script src="/js/ui/jquery.ui.menu.js"></script>
<script src="/js/ui/jquery.ui.autocomplete.js"></script>
<script src="/js/lhgdialog/lhgdialog.min.js?self=true&skin=iblue"></script>
<%-- 自动属性脚本结束--%>
<script type="text/javascript">
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return "";
}
var _id;
$(function () {
_id = GetQueryString("id");
parent.$("#bootstrapDialog .modal-footer").find("button").eq(1).hide();
initAllData();
});
var _pageindex = 1, _pagesize = 10;
var _pageindex1 = 1, _pagesize1 = 10; function initAllData() {
initTable1();
initTree();
}
function initTree() {
var url = encodeURI("/YYZB/Tools/SettlementApi.aspx?action=GetRelOrgCommunityList" + "&id=" + _id +
"&pageindex=" + _pageindex1 + "&pagesize=" + _pagesize1 + "&" + Math.random());
$('#tree').tree({
url: url,
checkbox: true,
onCheck: function (node, checked) {
if (loading) {
return;
}
relSettlementUnit(node, checked);
},
onBeforeLoad: function (node, param) {
loading = true;
},
onLoadSuccess: function (node, data) {
loading = false;
},
});
}
function initTable1()
{
$('#table1').datagirdExtend1({
url: encodeURI("/YYZB/Tools/SettlementApi.aspx?action=GetHaveRelOrgList&IsWaitRel=0" + "&id=" + _id +
"&pageindex=" + _pageindex1 + "&pagesize=" + _pagesize1 + "&" + Math.random()),
columns: [[
{ field: 'Id', checkbox: true, width: 50, sortable: true },
{
field: 'Name', title: '加盟店', width: 160, sortable: true
},
{ field: 'ParentOrgName', title: '父加盟店', width: 120, sortable: true }
]],
onReload: function () {
reload1();
}
});
}
function loaddatagrid() {
initTree();
reload();
reload1();
}
function reload() {
$("#table").treegrid('reload');
}
function reload1() {
$("#table1").datagrid('options').url = encodeURI("/YYZB/Tools/SettlementApi.aspx?action=GetHaveRelOrgList&IsWaitRel=0" + "&id=" + _id +
"&pageindex=" + _pageindex1 + "&pagesize=" + _pagesize1 + "&" + Math.random());
$("#table1").datagrid('reload');
}
function collapseAll() {
$('#table').treegrid('collapseAll');
$('#tree').tree('collapseAll');
}
//添加关联
function addRel() {
var _ids = new Array();
var _id = GetQueryString("id");
//var rows = $('#table').treegrid("getSelections");
//$.each(rows, function (index, item) {
// _ids.push(item.Id);
//});
$('input[name="cbx"]:checked').each(function () {
_ids.push($(this).val());
});
_ids.join(","); if (_ids.toString() == "") {
parent.$.fn.Alert({
message: "请选择加盟店！"
});
return;
}
$.post("/YYZB/Tools/SettlementApi.aspx", { "action": "AddSettlementUnitOrgRls", "ids": _ids.toString(), "SettlementUnitId": _id }, function (data) {
loaddatagrid();
});
}
//移除关联
function delRel() {
var _ids = new Array();
var _id = GetQueryString("id");
$.each($("#divHaved input[type='checkbox'][name='Id']:checked"), function (index, item) {
_ids.push(item.value);
});
_ids.join(","); if (_ids.toString() == "") {
parent.$.fn.Alert({
message: "请选择加盟店！"
});
return;
}
$.post("/YYZB/Tools/SettlementApi.aspx", { "action": "DelSettlementUnitOrgRls", "ids": _ids.toString(), "SettlementUnitId": _id }, function (data) {
loaddatagrid();
});
}
//关联社区
function relSettlementUnit(node,checked) {
var _id = GetQueryString("id");
var id = node.id;
var isReaf = 1;
if (node.attributes == undefined || node.attributes == null)
{
isReaf = 0; //加盟店
$.post("/YYZB/Tools/SettlementApi.aspx", { "action": "BatUpdateSettlmentCommunityById", "SettlementUnitId": _id, "checked": checked, "OrgId": id }, function (data) {
$.dialog.tips('操作中...', 1, 'loading.gif');
})
}
else
{
var orgId = node.attributes.OrgId;
$.post("/YYZB/Tools/SettlementApi.aspx", { "action": "UpdateSettlmentCommunityById", "SettlementUnitId": _id, "id": id, "checked": checked,"OrgId":orgId }, function (data) {
$.dialog.tips('操作中...', 1, 'loading.gif');
})
}
}
function formatProgress(value, rowData, rowIndex) {
var nodes = $('#table').treegrid('getChildren', rowData.Id);
//if (rowData.OrgLevel > 2 || (rowData.OrgLevel == 2)) {
if (nodes.length == 0) { //叶子节点前面加复选框
return "<input type='checkbox' name='cbx' id='cbx_" + rowData.Id + "' value='" + rowData.Id + "'/>" + value;
} else {
return value;
}
}
</script> </head>
<body>
<form id="form1" runat="server">
<div>
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active" id="tab_basic_info"><a href="#home" role="tab" data-toggle="tab">待关联加盟店</a></li>
<li id="tab_service_project"><a href="#serviceProject" role="tab" data-toggle="tab">已关联社区</a></li>
</ul>
<div class="tab-content" style="height:420px;">
<div class="tab-pane active" id="home">
<div style="float:left;" id="divWait">
<table id="table" class="easyui-treegrid" title="待关联加盟店" style="width:300px;height:390px;"
data-options="
iconCls: 'icon-ok',singleSelect:false,
rownumbers: true, remoteSort: false,
animate: true,
url: '/YYZB/Tools/SettlementApi.aspx?action=GetWaitRelOrgListAll',
collapsible: true,
fitColumns: true,
method: 'get',
idField: 'Id',
treeField: 'Name',autoScroll : true,
onLoadSuccess: function (row, data)
{
//$('#table').treegrid('collapseAll');
}
">
<thead>
<tr>
<th data-options="field:'Name',width:180,formatter:formatProgress">机构名称</th>
</tr>
</thead>
</table>
</div>
<div style="float:left;text-align:center;width:90px;margin:60px 10px 0px 10px;">
<button type="button" id="btnRight" class="btn btn-primary btn-sm" style="margin:5px; padding: 5px;width:80px;" onclick="addRel();">
> >
</button><br />
<button type="button" id="btnLeft" class="btn btn-primary btn-sm" style="margin:5px; padding: 5px;width:80px;" onclick="delRel();">
< <
</button>
</div>
<div style="float:left;" id="divHaved">
<table id="table1" title="已关联加盟店" class="table table-striped table-bordered table-hover" style="width:320px;">
</table>
</div>
</div>
<div class="tab-pane" id="serviceProject">
<ul id="tree" class="easyui-tree" data-options="method:'get',animate:true,checkbox:true"></ul>
</div>
<input type="hidden" id="relSettlementUnit" />
</div>
</div>
</form>
</body>
</html>
Jquery EasyUI 开发实录的更多相关文章
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立
上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作
/****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...
- jquery+easyui开发、培训文档
目 录 1.... Accordion(可折叠标签)......................................................................... ...
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发
进行本文之前需要在数据库用户表里面增加一条用户数据,直接手动添加即可,未安全考虑密码一定要使用Md5加密后的,这里提供666666的Md5密文为(c831b04de153469d),本文完成登录模块的 ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...
- 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之二 用户管理源代码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享> ...
- Jquery EasyUi实战教程布局篇
转自:http://www.kwstu.com/ArticleView/kwstu_20139413501290 送给大家一个非常好的后台布局模板,本人后来就选择了这个模板http://www.kws ...
- HTML5界面开发工具jQuery EasyUI更新至v1.3.5
本文转自:evget.com HTML5界面开发工具 jQuery EasyUI 最新发布v1.3.5,新版修复了多个bug,并改进了menu,tabs和slider等多个控件.jQuery Easy ...
随机推荐
- JSON.parse()和JSON.stringify()
1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23&q ...
- 10个最好用的HTML/CSS 工具、插件和资料库
大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...
- JS图片上传预览插件制作（兼容到IE6）
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- css中line-height行高的深入学习
之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
- Tableau未必最佳，国内BI也能突破重围！
如今,百度一下商业智能或BI工具,总能看到Tableau的身影.并不是Tableau的营销做得好,而是国内对于商业智能工具的认知和选择似乎都落在了Tableau身上.导致不管业内业外都对商业智能的概念 ...
- Git的四个基本概念及 git的工作流程
- 2003-Can't connect to mysql server on localhost (10061)
mysql数据库出现2003-Can't connect to mysql server on localhost (10061)问题 解决办法:查看wampserver服务器是否启动,如果没有启动启 ...
- System进程(pid=4)占用80端口的解决方案
问题 Mail服务器在安装TFS服务(含SQLServer2016)后启动不了网页服务. 排查问题 使用命令查看端口占用情况 netstat -nao | find ":80" n ...
- FineReport:关于扩展行列求各种条件下的函数运用
最简单的扩展列,扩展行的求"最大,最小,平均"值的例子 设计图 效果图 相关函数 =MAX(B2:E2) =MIN(B2:E2) =AVERAGE(B2:E2) 这个是(满足条件) ...