Easy UI 的总结
jQuery EasyUI是一组基于jQuery的Ui插件集合体，而jQuery EasyUI的目标是更轻松，更美观和功能丰富的UI界面。
EasyUI的特点：
1.封装了大量的控件
2.控件通过Html或者JS代码创建
3.控件与服务器端的通信方式是Ajax基于Json的通信方式。
通常用于后台管理系统。
easyUI-环境搭建：
1、copy资源文件到项目中 （thems、2js）
2、在jsp中引入资源 js和css资源的导入顺序要保持不变。
基本语法：
创建easyUI控件的两种方式：标签 和 javascript方式。
<标签名 class=“easyui-控件类型名” data-options=“easyui控件属性名:值,属性名2:值,事件名:函数名”>
<标签名 id=“id”>
$(function(){
// 初始化
$("#id").控件类型名({
easyui控件属性名:值,
属性名2:值,
事件名:函数名,
事件名:function(){}
});
})
调easyui控件的方法： $("#id").控件类型名(“方法名”, 参数);
主要控件：
1、linkbutton
$("#id").linkbutton({
iconCls:“icon-add”,//图标
plain:true,//为true时显示简洁效果。
onClick:function(){
$("#btn1").linkbutton(“resize”,{width:200,height:50});
}
});
// 右下角提示
$.messager.show({
title:“系统提示”,//标题
msg:“保存成功！”，//提示文本内容
showType:“show”,
showSpeed:5000
});
$.messager.alert(“标题”,
“msg内容”,
“question”,//提示图标类型：info/error/warning
function(){
console.log(“ok…”);
});
$.messager.confirm(“标题”,
“确认删除吗？”,
function(bn){
console.log(bn);
});
2、dialog
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲d1").dialog({ …{pageContext.request.contextPath}/addUser.jsp", //dialog中加载的远程内容
modal:true, //是否模块化显示
cache:false
//iconCls:“icon-man”,
//toolbar:"#tbs",
//buttons:"#bb", //Array，定制dialog底部按钮
//collapsible:true,
//minimizable:true,
//maximizable:true,
//resizable:true
});
$("#d1").dialog(“open”);
$("#d1").dialog(“close”);
注意：抓取页面时,被抓取的页面中的js的处理:
js需要定制在body中，子页面的head无效， 或者在子页面中只定义需要执行的代码片段。父页面抓取了子页面后，父子页面融为一张页面，互相的资源共享。
3、validatebox(验证框)
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲input1").valida…{pageContext.request.contextPath }/reg’,‘uname’]"
remote[‘http://…/action.do’,‘paramName’]：发送ajax请求需要验证的值，当成功时返回true。
});
自定义检查规则：
. e x t e n d ( .extend( .extend(.fn.validatebox.defaults.rules, {
// 扩展规则1
自定义名称:{
validator:function(val, params){
params[0]
return true|false;
},
message:“错误提示信息 {0}”
},
// 扩展规则2
自定义名称2:{}
});
例子：
// 自定义校验规则
. e x t e n d ( .extend( .extend(.fn.validatebox.defaults.rules, {
// 长度至少6位
minLength:{
validator:function(val,params){ //val代表当前元素中输入的内容 params代表使用规则时传递的参数
// 检查长度
return val.length>=params[0];
},
message:“长度至少 {0} 位” //{0} 代表在错误提示信息中 获取规则参数数组中的第一个元素
},
// 长度必须在 某个范围
rangeLength:{
validator:function(val, params){
return val.length>=params[0] && val.length<=params1;
},
message:“长度必须在 {0} 到 {1} 之间”
},
// 必须是数字
isNumber:{
validator:function(val){
return !isNaN(val);
},
message:“必须是数字”
},
// 两次输入必须 相同
isEquals:{
validator:function(val, params){
// 获取input1输入的内容
var input1Val = $(params[0]).val();
// 检查
return input1Val==val;
},
message:“两次输入必须相同”
},
// 爱好至少选一项
myCheckbox:{
validator:function(val, params){
return $(“input[name=hobby]:checked”).length>=1;
},
message:“爱好至少选一项”
}
});
// 全局日期格式
$.fn.datebox.defaults.formatter = function(date){ // 把date转换为指定格式的字符串
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+"-"+m+"-"+d;
}
$.fn.datebox.defaults.parser = function(s){
var t = Date.parse(s);
if (!isNaN(t)){
return new Date(t);
} else {
return new Date();
}
}
自定义验证规则：
注意：在validator中，如果返回true则表示验证通过反之，验证非法
注意：在自定义的规则的key中不要包含数字,如：minz,eqz
4、textbox（文本框）
$("#input1").textbox({
type:“text|password”,
required:true,
validType:“isNumber”,
iconCls:“icon-search”
//type:“password”,
//value:444,
//width:500,
//height:50,
//prompt:“请输入数字”,
//multiline:true //定义是否是多行文本框。
//prompt://提示信息
});
$("#input1").textbox(“getValue”);//取值方法
$("#input1").textbox(“setValue”,“hello”);//赋值方法
5、datebox
$("#input1").datebox({
editable:false，//是否可编辑
formatter:function(date){return “”;}//格式化显示
parser:fucntion(str){return new Date();//日期解析，要和formatter配合使用
}
});
}
日期输入框，有两个行为：format和parse，分别负责Date->String和String->Date,而且两个行为是相互呼应的,所以在定制format时，需要将parse一起修改,才能保证插件正常运作。
提示：在easyui的汉化包中定义了一组format和parse方法，可以直接使用，或基于其修改后使用； 或者直接导入汉化包，也是可行的。
NumberBox数字输入框，属性：min:0, //最小值
value:10, //默认值
max:10, //最大值
precision:2, //精度，最多保留几位小数(四舍五入)
prefix:‘￥’, //数字前缀
groupSeparator:’,’, //分隔：112,444,225,111.11
required:‘required’" //必填
方法：setValue
getValue 使用方式参照TextBox
6、combobox（下拉列表框）
$("#input1").combobox({
eidtable:false,//是否允许直接在组件中输入内容
url:"",//下拉框的数据来源(json)
textField:"",//基础数据字段名称绑定到该下拉列表框。
valueField:"",//基础数据值名称绑定到该下拉列表框。
panelHeight：下拉panel的高度
selected：选中项 ，默认第一项被选中
onLoadSuccess:function(data){// data-list/array，下拉列表被选中
$(this).combobox(“setValue”, data[0].sid);
},
onChange:function(newVal, oldVal){
//当下拉框的选项发生更改时触发
console.log(“aaaa… " + newVal +”, “+oldVal);
},
onSelect:function(item){
//当下拉框的选项被选中时触发
console.log(item.text+”, “+item.value);
}
});
// 初始化 reload1Btn 按钮，测试reload（不带参数）
$(”#reload1Btn").linkbutton({
onClick:function(){
// 使用旧的URL重新载入列表数据
$("#select1").combobox(“reload”); // 调combobox的reload方法
}
});
// 初始化 reload2Btn 按钮，测试reload（带参数）
$("#reload2Btn").linkbutton({
onClick:function(){
// 使用新的URL重新载入列表数据
$("#select1").combobox("reload", "${pageContext.request.contextPath }/combobox2-json2.jsp");
}
});
下拉框：onSelect细节：
下拉框中的数据使用静态数据填充时，参数item代表选中的选项，可以直接通过属性value和text分别获取该选项的【数据】和【文本】。
如果使用远程数据填充，参数item代表选中选项对应的json对象，不能再用value和text属性，应该使用json对象自身的属性。
7、form
将Form定制为一个可以发送异步请求的Form。如此在异步请求中携带用户参数变得极其直接、简单。并且可以很方便的在请求发送之前对用户参数进行验证。
$("#form1").form({
onLoadSuccess:fucntion(data){ //data-1个对象
$("#combobox1").combobox("setValue", data.cate.cid); //2个表的下拉列表默认选中
}
});
});
// 初始化重置按钮
$("#resetBtn").linkbutton({
onClick:function(){
$("#f1").form(“reset”);
}
});
8、datagrid
| 编号 | 操作 $("#dg1").datagrid({ title=标题 iconCls=图标 singleSelect=单选模式 striped=数据行背景交替 fitColumn:true,//列宽度自动适应，在总宽度不够时，自动调节列宽度 url:"",//加载远程数据 pagination:true,//是否显示分页栏 pageSize:5,//每页的数据行数 pageList:[2,5,8],//每页展示行数列表 pageNumber:1//首次加载页号, remoteSort:false,//关闭表格的远程排序 pagePosition=top/bottom/both，设置分页栏的位置 toolbar:设置的工具条 columns:[[{field:“sid”,width:1,title:“编号”}, {field:“sname”,width:1,title:“姓名”}, {field:“birthday”,width:1,title:“生日”}, {field:“xx”,width:1,title:“操作”,formatter:function(val, row, idx){ return “修改”; }}]] }); function myFormatter(val, row, idex){ return “修改”; } 分页的JSON格式：{ “total”:总行数, “rows”:[{},{}] // 当前页的数据行 } 原理： easyui控件ajax与server交互，传递参数：page当前页 rows每页显示的行数 方法： load 加载第1页 添加 reload 当前页 改删 DataGrid异步加载远程数据：需要的数据是json，且表格中列的字段名分别为：code、name、price,所以json的格式应该为：[{“code”:xxx,”name”:xxx,”price”:xxx},{…},{…}] ,json数据中的key要和表格中的字段名对应，才可以正确的引用数据。 DataGrid数据css样式定制： 列属性=styler DataGrid数据格式化输出定制： 列属性= formatter（重点） DataGrid对某个数据列排序：（了解） sorter的返回值1或者-1，返回值：相邻两列的比较结果 function mySorter(a,b){ return (a>b?1:-1); } // 自定义操作列的 内容 function myFormatter(val, row, idx){ return "修改保存 "; } |
|---|
// 编辑行
function editRow(idx,obj){
// 开始编辑
$("#allUserDatagrid").datagrid("beginEdit", idx);
// 隐藏修改 ，显示 保存
$(obj).css("display","none");
$(obj).next().css("display","inline");
}
// 保存行
function saveRow(idx){
// 结束编辑
$("#allUserDatagrid").datagrid("endEdit", idx);
// 手动发ajax
var a = $("#allUserDatagrid").datagrid("getSelected");
console.log(a);
}
// 初始化 datagrid的工具栏区接钮–批删
$("#ToolsTabDelBatchBtn").linkbutton({
onClick:function(){
// 获取选中所有行 构成的sjon对象数组
var arr = $("#PersonTable").datagrid(“getSelections”);
console.log(arr);
if(arr.length <=0){
$.messager.show({
title:“提示信息!”,
msg:“至少选择一行记录进行删除!”
});
} else {
var ids = ‘’;
for(var i =0 ;i
}
ids = ids.substring(0 , ids.length-1);
$.messager.confirm(“标题”,“确认删除吗？”,
function(bn){
//console.log(bn);
. p o s t ( " .post(" .post("{pageContext.request.contextPath }/person/deleteSome/"+ids,
function(result){
//1 刷新数据表格
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲PersonTable").d…(’#t_user’).datagrid(‘unselectAll’);
//3 给提示信息
$.messager.show({
title:“提示信息!”,
msg:“操作成功!”
});
}
);
}
);
}
}
});
// 初始化 datagrid的工具栏区接钮–删除
$("#allUserDatagridDelBtn").linkbutton({
onClick:function(){
// 获取当前先中行
var a = $("#allUserDatagrid").datagrid(“getSelected”);
console.log(a.sid);
// 手动发ajax请求
}
});
9、layout
布局，属性：region=区域
title=标题
split=区域分隔
iconCls=图标
href=加载外部页面
border=区域是否有边框
disabled=区域是否可鼠标拖拽
注意:布局的东西南北四个区域是可选的,center区域是必需的.
使用技巧 每个布局面板中的内容可以静态的定义
每个布局面板中的内容也可以是通过href加载的外部页面
布局可以嵌套
布局的方法:
var pan=$(“body”).layout(“panel”,“north”);//获得对应区域的面板
pan.panel(“refresh”);//刷新布局面板的页面
pan.panel(“refresh”,“url”);//重新加载布局面板的页面
10、tree
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲tree1").tree({ …("#tree1").tree(“isLeaf”, node.target)){
// 是，则 判断tab是否存在
if ($("#tabs1").tabs(“exists”, node.text)){ // 是，则 先中
$("#tabs1").tabs(“select”, node.text);
} else {
// 不存在，则 添加
// 不存在，则 在tabs1中 添加新tab （标题-菜单项文本 内容-远程加载菜单对应的页面 关闭）5
$("#tab1").tabs(“add”, {
title:node.text,
closable:true,
href:node.attributes.mypath
});
}
}
}
});
每个节点的属性：
text:节点文本
iconCls:节点图标
state:节点是否关闭 open/closed
children：子节点
其他任意属性
tree的JSON格式：[
{
“id”:,
“text”:“用户管理”,
“children”:[{
“id”:,
“text”:“查询用户”,
“attributes”:{
“mypath”:""
}
},{}]
},{
“id”:,
“text”:“部门管理”,
“attributes”:{
“mypath”:""
}
}
]
Tree基本搭建：
其中如果嵌套， 则父tree的标题 必须用
11、tabs
图片: 
带尺寸的图片:
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
// An highlighted block
var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的：
| 项目 | Value |
|---|---|
| 电脑 | $1600 |
| 手机 | $12 |
| 导管 | $1 |
设定内容居中、居左、居右
使用:---------:居中
使用:----------居左
使用----------:居右
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：
| TYPE | ASCII | HTML |
|---|---|---|
| Single backticks | 'Isn't this fun?' |
‘Isn’t this fun?’ |
| Quotes | "Isn't this fun?" |
“Isn’t this fun?” |
| Dashes | -- is en-dash, --- is em-dash |
– is en-dash, — is em-dash |
创建一个自定义列表
- Markdown
- Text-to- HTML conversion tool
- Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。1
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能，丰富你的文章
- 关于 甘特图 语法，参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:
这将产生一个流程图。:
- 关于 Mermaid 语法，参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图：
- 关于 Flowchart流程图 语法，参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
注脚的解释 ↩︎