1、（一） DataGrid 初步学习。EasyUI 严格区分大小写用 Easyui 创建前台时首先需要引用jquery-easyui-1.3.2/themes/default/easyui.cssjquery-easyui-1.3.2/themes/icon.cssjquery-easyui-1.3.2/demo/demo.cssjquery-easyui-1.3.2/jquery-1.8.0.min.jsjquery-easyui-1.3.2/jquery.easyui.min.js显示一个 DataGrid第一步新闻这样就可以显示一个简单的 DataGrid 这些是基本的属性，在 标签中 d
2、ata-options 属性 url 的值是提供 Json 数据的路径，第二步在 listdata 方法中提供 json 数据格式是json = “total“:“ + num + “,“rows“:“ + json + “;num：的值等于你所查询数据表中所有数据的个数json：是一个 json 字符串，通过 list 集合序列化得到的注：list 集合中的数据不是干净的可以用下面的方法变成干净的数据var jsonlist = items.Select(p = newid = p.id,（二） DataGrid 升级进化EasyUI 严格区分大小写这样数据就可以显示出来了，功能很少现在将d
3、atagrid升级（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_Message.OrderByDescending(d = d
4、.MessageId).Skip(page - 1) * row).Take(row).ToList();B、ADO.net 用存储过程A、存储过程的书写CREATE proc UP_PageByRowNumber(pageIndex int,pageSize int)ASDECLARE startRow int, endRow intSet startRow = (pageIndex - 1) * pageSize +1SET endRow = startRow + pageSize -1 SELECT * FROM ( SELECT *,ROW_NUMBER() OVER (ORDER B
5、Y id ) AS RowNumberFROM Student ) T WHERE T.RowNumber BETWEEN startRow AND endRow）5、 collapsible：true 设置 datagrid 可以折叠；6、显示这样的效果Item IDProductItem DetailsList PriceUnit CostAttributeStatus7、要用到高级查询首先把查询条件放到中 div 的属性 id=“tb“ style=“padding:5px;height:auto“ 比较美观中 data-options 属性Toolbar：#tb设置这个属性可以吧 Da
6、taGrid 放到 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 = “)详细的
7、高级查询参考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:“）红色的意思是在那个字段下面显示，显示的数据固定左边，固定上边
8、代码如何显示，参考固定左边上边.html10、设置一行的样式rowStyler: function(index,row)if (row.listprice 里的标签中的data-options属性1、 field：字段 字段是你需要显示的字段2、 width：100 字段的宽度，3、 align： right 对齐方式， （left，center ） ；4、 style：cellStyler 高亮显示；（注：function cellStyler(value,row,index)if (value function formatPrice(val,row)if (val (+val+); el
9、se return val;6、 checkbox:true 显示复选框注：（标签中data-option没有singleSelect ：true（只能选择一行）这个属性就可以实现选择多行）（3）对数据进行修改1、在分页栏里面显示操作按钮在页面加载事件里面写$(function()var pager=$(#dg).datagrid(getPager):paget.pagination(buttons:iconCls:icon-search,handler:function()alert(“查看”)红色是循环体用逗号隔开改变 iconCls 属性显示不同图片);2、 标签中 data-optio
10、n 属性写 toolbar：toolbarvar 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-
11、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 年/月/ 日function myformatter(date)var y = date.getFullYear();var m = date.getMonth()+1;
12、var d = date.getDate();return y+-+(m3、下拉列表 class=“easyui-combobox” panelHeight=“auto“ 这个属性自动调节高度$(#state).combobox(setValue,v); 设置下拉列表框的被选项$(#state).combobox(getValue) 获取选中项$(#state).combobox(disable) 不可用，enable 可用在后台为下拉列表框赋值：data-option 里面的属性url： 提供数据的路径，valueField:id alue 值，textField：texttext 值，pa
13、nelWidth：350 宽，panelHeight：auto 高自动，formatter：formatItem 触发的事件，formatItem 事件，function formatItem(row)var s = + row.text + + + row.desc + ;return s;multiple：true 可以全选json 数据格式 是普通格式4、数字框required 开启验证data-options=”min:10,max:90,precision:2,”最小值 10，最大值 90 ，有 2 位小数，数字可以变大变小的数字框class=“easyui-numberspinne
14、r”data-options=”increment:200”一次改变 200data-options=“min:10,max:100,required:true“最大值最小值并启动验证Form 表单验证required=“true” 是否启用验证；validType=“”；url（匹配电子邮件正则表达式规则）, email（匹配 URL 正则表达式规则） ，length0,100（允许字符串长度的范围） 也可以是missingMessage 定义文本框为空时提示的文本信息，invalidMessage 文本框内容不合法时提示的文本信息扩展验证在$(function() ) 事件里面写$.ext
15、end($.fn.validatebox.defaults.rules, CHS: validator: function (value, param) return /u4e00-u9fa52,5$/.test(value);,message: 请输入汉字2 到5个,Pass: validator: function (value, param) return /u0391-uFFE5w3,10$/.test(value);,message: 密码只允许汉字、英文字母、数字及下划线3到10位,equalTo: validator: function (value, param) return
16、 $(param0).val() = value;,message: 两次密码输入不匹配,idcard: validator: function (value, param) return idCard(value);,message:请输入正确的身份证号码 );submit 提交方式验证不通过不会提交$(#ff).form(submit);验证不通过不提交（ajax）if ($(#Username).validatebox(isValid) = false)$.messager.alert(温馨提示, 密码输入不合法);return false;Form 标签添加事件data-options
17、=“onChange： function() ”给 from 标签赋值function loadLocal()$(#ff).form(load,name:myname,email:,subject:subject,message:message,language:en);后台动态赋值字符串格式“name“:“easyui“,“email“:““,“subject“:“Subject Title“,“message“:“Message Content“,“language“:“en“$(#ff).form(load, /form/form_data1.json);4、 的属性 class=“ea
18、syui-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 图标靠右显示（四
19、） 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,n
20、ode.target);显示图片在 json 数据中加 “iconCls“:“icon-save“全部收起$(tt).tree(collapseAll)全部展开$(tt).tree(expandAll)（五） 进度条设置显示多少$(#p).progressbar(setValue, value);Value 是数字获取到显示的值var value = $(#p).progressbar(getValue);（六） 弹出框alert：弹出的是中文$.messager.defaults = ok: “确定“, cancel: “取消“ ;$.messager.alert(标题,提示什么,图片)第三
21、的参数可以不写第三个参数的值 error，info ， question，warning在网页右下脚显示提示框$.messager.show(title:标题,msg：内容 ，showType：show)showType 的值位 show，slide，fade确认框$.messager.confirm(,事件)输入框$messager.prompt(,事件)弹出窗口：在不同的位置$.messager.show(title:,mag:,showType:,style:left:,right:0,top:,bottom:,)在上方显示top:document.body.scrollTop+docu
22、ment.documentElement.scrollTop 在下方显示bottom：-document.body.scrollTop-document.documentElement.scrollTop（七） 页面的布局用布局，把类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 即显示边框
