EasyUI总结(自动保存的).docx

（一） 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 这些是基本的属性，在标签中data-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严格区分大小写这样数据就可以显示出来了，功能很少现在将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_Message.OrderByDescending(d = d.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 BY 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设置这个属性可以吧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:）红色的意思是在那个字段下面显示，显示的数据固定左边，固定上边代码如何显示，参考固定左边上边.html10、设置一行的样式rowStyler: function(index,row)if (row.listprice 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 高亮显示一样的效果function formatPrice(val,row)if (val 30)return (+val+); else 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-option属性写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-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;var d = date.getDate();return y+-+(m10?(0+m):m)+-+(d10?(0+d):d);function myparser(s)if (!s) return new Date();var ss = s.split(-);var y = parseInt(ss0,10);var m = parseInt(ss1,10);var d = parseInt(ss2,10);if (!isNaN(y) & !isNaN(m) & !isNaN(d)return new Date(y,m-1,d); else return new Date();3、下拉列表 class=“easyui-combobox” panelHeight=auto 这个属性自动调节高度$(#state).combobox(setValue,v); 设置下拉列表框的被选项$(#state).combobox(getValue) 获取选中项$(#state).combobox(disable) 不可用，enable可用在后台为下拉列表框赋值：data-option里面的属性url：提供数据的路径，valueField:id alue值，textField：texttext值，panelWidth：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-numberspinner”data-options=”increment:200”一次改变200data-options=min:10,max:100,required:true最大值最小值并启动验证Form表单验证required=“true” 是否启用验证；validType=“”；url（匹配电子邮件正则表达式规则）, email（匹配URL正则表达式规则），length0,100（允许字符串长度的范围） 也可以是missingMessage 定义文本框为空时提示的文本信息，invalidMessage 文本框内容不合法时提示的文本信息扩展验证在$(function() ) 事件里面写 $.extend($.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 $(param0).val() = value; , message: 两次密码输入不匹配 ,idcard:validator:function(value,param)returnidCard(value);,message:请输入正确的身份证号码 );submit提交方式验证不通过不会提交$(#ff).form(submit);验证不通过不提交（ajax）if ($(#Username).validatebox(isValid) = false) $.messager.alert(温馨提示, 密码输入不合法); return false; Form标签添加事件data-options=“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=“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:trueplain：true不显示边框（看上去不像按钮）；data-options=iconCls:icon-edit, iconAlign:righticonAlign: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,node.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(标题,提示什么,图片)第三的参数可以不写第三个参数的值 error，info，question，