data-options有属性
toolbar: '#dlg-toolbar',
buttons: '#dlg-buttons'
变成遮罩层
data- options=”modal:true”
（三） 表单的取值和验证
1、普通文本框 class=“easyui-validatebox”
2、时间框 class=“easyui-datebox”
时间框显示时间 class=“easyui-datetimebox”
普通时间框显示的格式是“10/9/2013”；月/日/年
换一个格式2013-10-15 年/月/日
3、下拉列表 class=“easyui-combobox”
panelHeight="auto" 这个属性自动调节高度 $('#state').combobox('setValue',v); 设置下拉列表框的被选项
$('#state').combobox('getValue') 获取选中项
$('#state').combobox('disable') 不可用，enable可用
在后台为下拉列表框赋值：
data-option里面的属性
url：‘’提供数据的路径，
valueField:’id’ alue值，
textField：‘text’text值，
panelWidth：350 宽，
panelHeight：auto 高自动，
formatter：formatItem 触发的事件，
formatItem 事件，
function formatItem(row){
var s = '' + + '
' +
'' + + '';
return s;
}
multiple：true 可以全选
json数据格式 是普通格式
4、数字框
required 开启验证
data-options=”min:10,max:90,precision:2,”
最小值10，最大值90 ，有2位小数，
数字可以变大变小的数字框
class=“easyui-numberspinner”
data-options=”increment:200”
一次改变200
data-options="min:10,max:100,required:true"
最大值最小值并启动验证
Form表单验证
required=“true” 是否启用验证；
validType=“”；
url（匹配电子邮件正则表达式规则）, email（匹配URL正则表达式规则），length[0,100]（允许字符串长度的范围）
也可以是
missingMessage 定义文本框为空时提示的文本信息，
invalidMessage 文本框内容不合法时提示的文本信息
扩展验证
在$(function(){ }) 事件里面写
$.extend($., {
CHS: {
validator: function (value, param) {
return /^[u4e00-u9fa5]{2,5}$/.test(value);
},
message: '请输入汉字2到5个'
},
Pass: {
validator: function (value, param) {
return /^[u0391-uFFE5w]{3,10}$/.test(value);
},
message: '密码只允许汉字、英文字母、数字及下划线3到10位'
},
equalTo: {
validator: function (value, param) {
return $(param[0]).val() == value;
},
message: '两次密码输入不匹配'
},
idcard: {
validator: function (value, param) {
return idCard(value);
},
message:'请输入正确的身份证号码'
}
});
submit提交方式验证不通过不会提交
$('#ff').form('submit');
验证不通过不提交（ajax）
if ($('#Username').validatebox('isValid') == false)
{ $.('温馨提示', '密码输入不合法');
return false;
}
Form标签添加事件
data-options=“onChange： function(){ }”
给from标签赋值
function loadLocal(){
$('#ff').form('load',{
name:'myname',
email:'mymail@',
subject:'subject',
message:'message',
language:'en'
});
}
后台动态赋值
字符串格式
{
"name":"easyui",
"email":"easyui@",
"subject":"Subject Title",
"message":"Message Content",
"language":"en"
}
$('#ff').form('load', '../form/form_');
4、的属性 class=“easyui-linkbutton”
iconCls=“icon-search” 查找
iconCls=“icon-add” 添加
iconCls=“icon-edit” 修改
iconCls=“icon-save” 保存
iconCls=“icon-cut” 剪切
iconCls=“icon-remove” 删除
data-options="iconCls:'icon-edit',plain:true"
plain：true不显示边框（看上去不像按钮）；
data-options="iconCls:'icon-edit', iconAlign:'right'"
iconAlign:'right' 图标靠右显示
（四） TreeMenu用法
data-options里面的属性
url：‘’，提供json字符串的方法
json数据的格式
[{
“id”:1,
“text”:””,
“children”:[
{
“id”:11,
“text”:”friend”,
“state”: ”closed”,
“children”:[
{}
]
},{}
]
},
{
}]
animate：true 是否显示动画，
checkbox:true 显示复选框
cascadeCheck:true 定义是否级联检查。
onlyLeafCheck：true 定义是否只在叶节点前显示 checkbox
可以编写的
onClick: function(node){
$(this).tree('beginEdit',);
}
显示图片
在json数据中加"iconCls":"icon-save"
全部收起
$(‘tt’).tree(‘collapseAll’)
全部展开
$(‘tt’).tree(‘expandAll’)
（五） 进度条
设置显示多少
$('#p').progressbar('setValue', value);
Value是数字
获取到显示的值
var value = $('#p').progressbar('getValue');
（六） 弹出框
alert：
弹出的是中文
$.ts = { ok: "确定", cancel: "取消" };
$.(‘标题’,’’提示什么,’图片’)
第三的参数可以不写
第三个参数的值 error，info，question，warning
在网页右下脚显示提示框
$.({
title:’标题’,
msg：‘内容’，
showType：‘show’
})
showType的值位show，slide，fade
确认框
$.m(‘’,’’,事件)
输入框
$(‘’,’’,事件)
弹出窗口：在不同的位置
$.({
title:’’,
mag:’’,
showType:’’,
style:{
left:’’,
right:0,
top:, bottom:’’,
}
})
在上方显示
top:Top+Top
在下方显示
bottom：-Top
（七） 页面的布局
用
布局，把类‘easyui-layout‘添加到
标签中
在其里面写子
子
有属性
region=”north” region的值有 north（北），south（南），east（东），west（西），center（居中）
split 是否显示拆分栏 true显示拆分栏，false不显示，（两个div之间的空隙）
可以写在div属性里面
可以写在div的data-options 里面
也可以分开写，
iconCls=“”；
显示图标
Easyui做分组
accordion 属性一般用来做分组，
方式一：
fit:false;是否自动填充父容器
border：true 是否显示边框，默认值为true 即显示边框
2023年6月21日发(作者：)
（一） DataGrid初步学习。
EasyUI严格区分大小写
用Easyui 创建前台时首先需要引用
jquery-easyui-1.3.2/themes/default/
jquery-easyui-1.3.2/themes/
jquery-easyui-1.3.2/demo/
jquery-easyui-1.3.2/
jquery-easyui-1.3.2/
显示一个DataGrid
第一步
这样就可以显示一个简单的DataGrid 这些是基本的属性，在
标签中data-options属性 url的值是提供Json数据的路径， 第二步
在listdata方法中提供json数据
格式是
json = "{"total":" + num + ","rows":" + json + "}";
num：的值等于你所查询数据表中所有数据的个数
json：是一个json字符串，通过list集合序列化得到的
注：list集合中的数据不是干净的可以用下面的方法变成干净的数据
var jsonlist = (p => new{id = ,}
（二） DataGrid升级进化
EasyUI严格区分大小写
这样数据就可以显示出来了，
功能很少现在将datagrid升级
（1）
中data-options属性 1、rownumber：true 显示行号； 2、singleSelect：true 只能选择一行；
3、url:'/New/listdata'” 提供json字符串的路径；
4、pagination：true 显示分页栏；
（注：现在显示分页了就要说一下提供数据的方法
ListData要写参数ListData（int page=1，int row =10）
page：显示第几页数据，row：一页显示多少天数据
集合的来源
A、用EF模型
var items = db.T_Message_yDescending(d => eId).Skip((page - 1) *
row).Take(row).ToList();
B、用存储过程
A、存储过程的书写
CREATE proc UP_PageByRowNumber
(
)
AS
DECLARE @startRow int, @endRow int
Set @startRow = (@pageIndex - 1) * @pageSize +1
SET @endRow = @startRow + @pageSize -1
SELECT * FROM
( SELECT *,ROW_NUMBER() OVER (ORDER BY id ) AS RowNumber
FROM Student ) T
WHERE ber BETWEEN @startRow AND @endRow
@pageIndex int,
@pageSize int
）
5、collapsible：true 设置datagrid可以折叠；
6、显示这样的效果
Item ID |
Product | Item Details |
List Price | Unit Cost | Attribute | Status |
7、要用到高级查询
首先把查询条件放到
中div的属性id="tb" style="padding:5px;height:auto" 比较美观
中data-options属性 Toolbar：‘#tb’设置这个属性可以吧DataGrid放到div中
（高级查询注意要点
查询按钮出发的事件onclick="GJCha()"
function GJCha() {
var title = $("#title").val();
var DTselect = $("#DTselect").val();
$('#dg').datagrid('load', {
title: title,
typeid: DTselect
})
}
提供Json数据的方法参数有变动
public ActionResult ListData(int page = 1, int row = 10, string typeid = "", string title = "")
详细的高级查询参考《EasyUI高级查询加分页.txt》
红色重点注意）
8、fitColumns ：true 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动
9、showFoot ：true 定义是否显示一行页脚
（通俗解释就是显示一下平均值或者是总数）
Json字符串有变化在后面加
（
"footer":[
{"unitcost":19.80,"listprice":60.40,"productid":"Average:"},
{"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
] ）
红色的意思是在那个字段下面显示，
显示的数据固定左边，固定上边代码如何显示，参考《固定左边上边.html》
10、设置一行的样式
rowStyler: function(index,row){
if (ice < 30){
return 'background-color:#6293BB;color:#fff;font-weight:bold;';
}
}
红色的字是字段
11、
（2）在
里的| 标签中的data-options属性 1、field：‘字段’ 《字段》是你需要显示的字段 2、width：100 字段的宽度， 3、align：’ right ’ 对齐方式，（left，center）； 4、style：cellStyler 高亮显示； （注： function cellStyler(value,row,index){ if (value < 30){ return 'background-color:#ffee00;color:red;'; } } ） 5、formatter:formatPrice 高亮显示一样的效果 6、checkbox:true 显示复选框 注： （ 标签中data-option没有singleSelect：true（只能选择一行）这个属性就可以实现选择多行） （3）对数据进行修改 1、在分页栏里面显示操作按钮 在页面加载事件里面写 $(function()){ var pager=$(‘#dg’).datagrid(‘getPager’): tion({ buttons:[ { iconCls:’icon-search’, handler:function(){ alert(“查看”) } } 红色是循环体用逗号隔开改变iconCls属性显示不同图片 ] }); } 2、 标签中data-option属性写toolbar：toolbar 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('open') （关闭close） 这种方法 data-options有属性 toolbar: '#dlg-toolbar', buttons: '#dlg-buttons' 变成遮罩层 data- options=”modal:true” （三） 表单的取值和验证 1、普通文本框 class=“easyui-validatebox” 2、时间框 class=“easyui-datebox” 时间框显示时间 class=“easyui-datetimebox” 普通时间框显示的格式是“10/9/2013”；月/日/年 换一个格式2013-10-15 年/月/日 3、下拉列表 class=“easyui-combobox” panelHeight="auto" 这个属性自动调节高度 $('#state').combobox('setValue',v); 设置下拉列表框的被选项 $('#state').combobox('getValue') 获取选中项 $('#state').combobox('disable') 不可用，enable可用 在后台为下拉列表框赋值： data-option里面的属性 url：‘’提供数据的路径， valueField:’id’ alue值， textField：‘text’text值， panelWidth：350 宽， panelHeight：auto 高自动， formatter：formatItem 触发的事件， formatItem 事件， function formatItem(row){ var s = '' + + '
' + '' + + ''; return s; } multiple：true 可以全选 json数据格式 是普通格式 4、数字框 required 开启验证 data-options=”min:10,max:90,precision:2,” 最小值10，最大值90 ，有2位小数， 数字可以变大变小的数字框 class=“easyui-numberspinner” data-options=”increment:200” 一次改变200 data-options="min:10,max:100,required:true" 最大值最小值并启动验证 Form表单验证 required=“true” 是否启用验证； validType=“”； url（匹配电子邮件正则表达式规则）, email（匹配URL正则表达式规则），length[0,100]（允许字符串长度的范围） 也可以是 missingMessage 定义文本框为空时提示的文本信息， invalidMessage 文本框内容不合法时提示的文本信息 扩展验证 在$(function(){ }) 事件里面写 $.extend($., { CHS: { validator: function (value, param) { return /^[u4e00-u9fa5]{2,5}$/.test(value); }, message: '请输入汉字2到5个' }, Pass: { validator: function (value, param) { return /^[u0391-uFFE5w]{3,10}$/.test(value); }, message: '密码只允许汉字、英文字母、数字及下划线3到10位' }, equalTo: { validator: function (value, param) { return $(param[0]).val() == value; }, message: '两次密码输入不匹配' }, idcard: { validator: function (value, param) { return idCard(value); }, message:'请输入正确的身份证号码' } }); submit提交方式验证不通过不会提交 $('#ff').form('submit'); 验证不通过不提交（ajax） if ($('#Username').validatebox('isValid') == false) { $.('温馨提示', '密码输入不合法'); return false; } Form标签添加事件 data-options=“onChange： function(){ }” 给from标签赋值 function loadLocal(){ $('#ff').form('load',{ name:'myname', email:'mymail@', subject:'subject', message:'message', language:'en' }); } 后台动态赋值 字符串格式 { "name":"easyui", "email":"easyui@", "subject":"Subject Title", "message":"Message Content", "language":"en" } $('#ff').form('load', '../form/form_'); 4、的属性 class=“easyui-linkbutton” iconCls=“icon-search” 查找 iconCls=“icon-add” 添加 iconCls=“icon-edit” 修改 iconCls=“icon-save” 保存 iconCls=“icon-cut” 剪切 iconCls=“icon-remove” 删除 data-options="iconCls:'icon-edit',plain:true" plain：true不显示边框（看上去不像按钮）； data-options="iconCls:'icon-edit', iconAlign:'right'" iconAlign:'right' 图标靠右显示 （四） TreeMenu用法 data-options里面的属性 url：‘’，提供json字符串的方法 json数据的格式 [{ “id”:1, “text”:””, “children”:[ { “id”:11, “text”:”friend”, “state”: ”closed”, “children”:[ {} ] },{} ] }, { }] animate：true 是否显示动画， checkbox:true 显示复选框 cascadeCheck:true 定义是否级联检查。 onlyLeafCheck：true 定义是否只在叶节点前显示 checkbox 可以编写的 onClick: function(node){ $(this).tree('beginEdit',); } 显示图片 在json数据中加"iconCls":"icon-save" 全部收起 $(‘tt’).tree(‘collapseAll’) 全部展开 $(‘tt’).tree(‘expandAll’) （五） 进度条 设置显示多少 $('#p').progressbar('setValue', value); Value是数字 获取到显示的值 var value = $('#p').progressbar('getValue'); （六） 弹出框 alert： 弹出的是中文 $.ts = { ok: "确定", cancel: "取消" }; $.(‘标题’,’’提示什么,’图片’) 第三的参数可以不写 第三个参数的值 error，info，question，warning 在网页右下脚显示提示框 $.({ title:’标题’, msg：‘内容’， showType：‘show’ }) showType的值位show，slide，fade 确认框 $.m(‘’,’’,事件) 输入框 $(‘’,’’,事件) 弹出窗口：在不同的位置 $.({ title:’’, mag:’’, showType:’’, style:{ left:’’, right:0, top:, bottom:’’, } }) 在上方显示 top:Top+Top 在下方显示 bottom：-Top （七） 页面的布局 用 布局，把类‘easyui-layout‘添加到 标签中 在其里面写子 子 有属性 region=”north” region的值有 north（北），south（南），east（东），west（西），center（居中） split 是否显示拆分栏 true显示拆分栏，false不显示，（两个div之间的空隙） 可以写在div属性里面 可以写在div的data-options 里面 也可以分开写， iconCls=“”； 显示图标 Easyui做分组 accordion 属性一般用来做分组， 方式一： fit:false;是否自动填充父容器 border：true 是否显示边框，默认值为true 即显示边框 本文发布于:2023-06-21，感谢您对本站的认可！ 版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。 |
发布评论