EasyUI总结 自动保存的Word下载.docx
《EasyUI总结 自动保存的Word下载.docx》由会员分享，可在线阅读，更多相关《EasyUI总结 自动保存的Word下载.docx（15页珍藏版）》请在冰豆网上搜索。
1、rownumber：
true显示行号；
2、singleSelect：
true只能选择一行；
3、url:
'
/New/listdata'
”提供json字符串的路径；
4、pagination：
true显示分页栏；
（注：
现在显示分页了就要说一下提供数据的方法
ListData要写参数ListData（intpage=1，introw=10）
page：
显示第几页数据，row：
一页显示多少天数据
集合的来源
A、用EF模型
varitems=db.T_Message_Message.OrderByDescending（d=>
d.MessageId）.Skip（（page-1）*row）.Take（row）.ToList（）;
B、ADO.net用存储过程
A、存储过程的书写
CREATEprocUP_PageByRowNumber
（
@pageIndexint,
@pageSizeint
）
AS
DECLARE@startRowint,@endRowint
Set@startRow=（@pageIndex-1）*@pageSize+1
SET@endRow=@startRow+@pageSize-1
SELECT*FROM
（SELECT*,ROW_NUMBER（）OVER（ORDERBYid）ASRowNumber
FROMStudent）T
WHERET.RowNumberBETWEEN@startRowAND@endRow
5、collapsible：
true设置datagrid可以折叠；
6、显示这样的效果
<
<
thdata-options="
field:
itemid'
width:
80"
rowspan="
2"
>
ItemID<
productid'
100"
Product<
thcolspan="
4"
ItemDetails<
listprice'
80,align:
right'
ListPrice<
unitcost'
UnitCost<
attr1'
240"
Attribute<
status'
60,align:
center'
Status<
7、要用到高级查询
首先把查询条件放到<
div>
中div的属性id="
tb"
padding:
5px;
height:
auto"
比较美观
Toolbar：
‘#tb’设置这个属性可以吧DataGrid放到div中
（高级查询注意要点
查询按钮出发的事件onclick="
GJCha（）"
functionGJCha（）{
vartitle=$（"
#title"
）.val（）;
varDTselect=$（"
#DTselect"
$（'
#dg'
）.datagrid（'
load'
{
title:
title,
typeid:
DTselect
}）
}
提供Json数据的方法参数有变动
publicActionResultListData（intpage=1,introw=10,stringtypeid="
stringtitle="
详细的高级查询参考《EasyUI高级查询加分页.txt》
红色重点注意）
8、fitColumns：
true就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动
9、showFoot：
true定义是否显示一行页脚
（通俗解释就是显示一下平均值或者是总数）
Json字符串有变化在后面加
footer"
[
{"
unitcost"
19.80,"
listprice"
60.40,"
productid"
Average:
},
198.00,"
604.00,"
Total:
}
]
红色的意思是在那个字段下面显示，
显示的数据固定左边，固定上边代码如何显示，参考《固定左边上边.html》
10、设置一行的样式
rowStyler:
function（index,row）{
if（row.listprice<
30）{
return'
background-color:
#6293BB;
color:
#fff;
font-weight:
bold;
}
}
红色的字是字段
11、
（2）在<
里的<
th>
标签中的data-options属性
1、field：
‘字段’《字段》是你需要显示的字段
2、width：
100字段的宽度，
3、align：
’right’对齐方式，（left，center）；
4、style：
cellStyler高亮显示；
functioncellStyler（value,row,index）{
if（value<
return'
#ffee00;
red;
}
}
5、formatter:
formatPrice高亮显示一样的效果
script>
functionformatPrice（val,row）{
if（val<
spanstyle="
（'
+val+'
）<
/span>
}else{
returnval;
<
/script>
6、checkbox:
true显示复选框
（<
标签中data-option没有singleSelect：
true（只能选择一行）这个属性就可以实现选择多行）
（3）对数据进行修改
1、在分页栏里面显示操作按钮
在页面加载事件里面写
$（function（））{
varpager=$（‘#dg’）.datagrid（‘getPager’）:
paget.pagination（{
buttons:
{
iconCls:
’icon-search’,
handler:
function（）{
alert（“查看”）
红色是循环体用逗号隔开改变iconCls属性显示不同图片
}）;
2、<
标签中data-option属性写toolbar：
toolbar
scripttype="
text/javascript"
vartoolbar=[{
text:
Add'
iconCls:
icon-add'
handler:
function（）{alert（'
add'
）}
];
红色是循环体
3、既然要修改数据就会涉及到弹出窗口
class属设置成
class=“easyui-window”弹出用
$（'
#my'
）.window（'
open'
）（关闭close）
变成遮罩层
data-options=”modal:
true”
或者
class=“easyui-dialog”弹出用
#dlg'
）.dialog（'
）（关闭close）
这种方法<
data-options有属性
toolbar:
'
#dlg-toolbar'
#dlg-buttons'
（三）表单的取值和验证
1、普通文本框class=“easyui-validatebox”
2、时间框class=“easyui-datebox”
时间框显示时间class=“easyui-datetimebox”
普通时间框显示的格式是“10/9/2013”；
月/日/年
换一个格式2013-10-15年/月/日
inputdata-options="
formatter:
myformatter,parser:
myparser"
functionmyformatter（date）{
vary=date.getFullYear（）;
varm=date.getMonth（）+1;
vard=date.getDate（）;
returny+'
-'
+（m<
10?
0'
+m）:
m）+'
+（d<
+d）:
d）;
functionmyparser（s）{
if（!
s）returnnewDate（）;
varss=s.split（'
）;
vary=parseInt（ss[0],10）;
varm=parseInt（ss[1],10）;
vard=parseInt（ss[2],10）;
isNaN（y）&
&
!
isNaN（m）&
isNaN（d））{
returnnewDate（y,m-1,d）;
returnnewDate（）;
3、下拉列表class=“easyui-combobox”panelHeight="
这个属性自动调节高度
#state'
）.combobox（'
setValue'
v）;
设置下拉列表框的被选项
getValue'
）获取选中项
disable'
）不可用，enable可用
在后台为下拉列表框赋值：
data-option里面的属性
url：
‘’提供数据的路径，
valueField:
’id’alue值，
textField：
‘text’text值，
panelWidth：
350宽，
panelHeight：
auto高自动，
formatter：
formatItem触发的事件，
formatItem事件，
functionformatItem（row）{
vars='
bold"
+row.text+'
br/>
+
'
#888"
+row.desc+'
returns;
multiple：
true可以全选
json数据格式是普通格式
4、数字框
inputclass=”easyui-numberbox”/>
required开启验证
data-options=”min:
10,max:
90,precision:
2,”
最小值10，最大值90，有2位小数，
数字可以变大变小的数字框
class=“easyui-numberspinner”
data-options=”increment:
200”
一次改变200
data-options="
min:
100,required:
true"
最大值最小值并启动验证
Form表单验证
required=“true”是否启用验证；
validType=“”；
url（匹配电子邮件正则表达式规则）,email（匹配URL正则表达式规则），length[0,100]（允许字符串长度的范围）
也可以是
missingMessage定义文本框为空时提示的文本信息，
invalidMessage文本框内容不合法时提示的文本信息
扩展验证
在$（function（）{}）事件里面写
$.extend（$.fn.validatebox.defaults.rules,{
CHS:
{
validator:
function（value,param）{
return/^[\u4e00-\u9fa5]{2,5}$/.test（value）;
},
message:
请输入汉字2到5个'
Pass:
return/^[\u0391-\uFFE5\w]{3,10}$/.test（value）;
密码只允许汉字、英文字母、数字及下划线3到10位'
equalTo:
return$（param[0]）.val（）==value;
两次密码输入不匹配'
idcard:
validator:
function
（value,
param）
return
idCard（value）;
message:
请输入正确的身份证号码'
}）;
submit提交方式验证不通过不会提交
#ff'
）.form（'
submit'
验证不通过不提交（ajax）
if（$（'
#Username'
）.validatebox（'
isValid'
）==false）
$.messager.alert（'
温馨提示'
'
密码输入不合法'
returnfalse;
Form标签添加事件
data-options=“onChange：
function（）{}”
给from标签赋值
functionloadLocal（）{
$（'
{
name:
myname'
email:
mymail@'
subject:
subject'
message:
message'
language:
en'
}）;
后台动态赋值
字符串格式
"
name"
easyui"
email"
easyui@"
subject"
SubjectTitle"
message"
MessageContent"
language"
en"
../form/form_data1.json'
4、<
a>
的属性class=“easyui-linkbutton”
iconCls=“icon-search”查找
iconCls=“icon-add”添加
iconCls=“icon-edit”修改
iconCls=“icon-save”保存
iconCls=“icon-cut”剪切
iconCls=“icon-remove”删除
icon-edit'
plain:
plain：
true不显示边框（看上去不像按钮）；
iconAlign:
iconAlign:
图标靠右显示
（四）TreeMenu用法
ulid=”tt”class=”easyui-tree”>
/ul>
data-options里面的属性
‘’，提供json字符串的方法
json数据的格式
[{
“id”:
1,
“text”:
””,
“children”:
11,
”friend”,
“state”:
”closed”,
{}
},{}
}]
animate：
true是否显示动画，
checkbox:
true显示复选框
cascadeCheck:
true定义是否级联检查。
onlyLeafCheck：
true定义是否只在叶节点前显示checkbox
可以编写的
onClick:
function（node）{
$（this）.tree（'
beginEdit'
node.target）;
显示图片
在json数据中加"
iconCls"
icon-save"
全部收起
$（‘tt’）.tree（‘collapseAll’）
全部展开
$（‘tt’）.tree（‘expandAll’）
（五）进度条
divid=”p”class=”easyui-progressbar”>
设置显示多少
#p'
）.progressbar（'
value）;
Value是数字
获取到显示的值
varvalue=$（'
（六）弹出框
alert：
弹出的是中文
$.messager.defaults={ok:
确定"
cancel:
取消"
};
$.messager.alert（‘标题’,’’提示什么,’图片’）
第三的参数可以不写
第三个参数的值error，info，question，warning
在网页右下脚显示提示框
$.messager.show（{
title:
’标题’,
msg：
‘内容’，
showType：
‘show’
}）
showType的值位show，slide，fade
确认框
$.messager.confirm（‘’,’’,事件）
输入框
$messager.prompt（‘’,’’,事件）
弹出窗口：
在不同的位置
’’,
mag:
showType:
style:
left:
right:
0,
top:
bottom:
在上方显示
document.body.scrollTop+document.documentElement.scrollTop
在下方显示
bottom：
-document.body.scrollTop-document.documentElement.scrollTop
（七）页面的布局
用<
布局，把类‘easyui-layout‘添加到<
标签中
在其里面写子<
子<
有属性
region=”north”region的值有north（北），south（南），east（东），west（西），center（居中）
split是否显示拆分栏true显示拆分栏，false不显示，（两个div之间的空隙）
可以写在div属性里面
divregion=”west”split=”true”>
/div>
可以写在div的data-options里面
divdata-options="
region:
south'
split:
也可以分开写，
iconCls=“”；
显示图标
Easyui做分组
accordion属性一般用来做分组，
方式一：
divid=”aa”class=”easyui-accordion”data-options=”fit:
true,border:
false”>
divdata-option=”selected:
true”//显示出来的div
fit:
false;
是否自动填充父容器
border：
true是否显示边框，默认值为true即显示边框
升级会员 