EasyUI总结 自动保存的Word下载.docx
- 文档编号:16699776
- 上传时间:2022-11-25
- 格式:DOCX
- 页数:15
- 大小:40.21KB
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即显示边框
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- EasyUI总结 自动保存的 EasyUI 总结 自动 保存
![提示](https://static.bdocx.com/images/bang_tan.gif)