EasyUI总结(自动保存的)

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第一步<table id=”dg” class=”easyui-datagrid” ti

2、tle="信息记录" style="width: 700px; height: 250px" data-options=”url:/new/listdata” ><thead><tr><th data-options=” field:new ”> 新闻</th></tr></thead></table>这样就可以显示一个简单的DataGrid 这些是基本的属性，在<table>标签中data-options属性 url的值是提供Json数据的路径，第二步

3、在listdata方法中提供json数据格式是json = ""total":" + num + ","rows":" + json + ""num：的值等于你所查询数据表中所有数据的个数json：是一个json字符串，通过list集合序列化得到的注：list集合中的数据不是干净的可以用下面的方法变成干净的数据var jsonlist = items.Select(p => newid = p.id,（二） DataGrid升级进化EasyUI严格区分大小写这样数据就可以显示出来了，功能很

4、少现在将datagrid升级（1）<table>中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.O

5、rderByDescending(d => d.MessageId).Skip(page - 1) * row).Take(row).ToList();B、用存储过程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_NUMB

6、ER() OVER (ORDER BY id ) AS RowNumberFROM Student ) T WHERE T.RowNumber BETWEEN startRow AND endRow）5、collapsible：true 设置datagrid可以折叠；6、显示这样的效果<tr><th data-options="field:'itemid',width:80" rowspan="2">Item ID</th><th data-options="field:'pro

7、ductid',width:100" rowspan="2">Product</th><th colspan="4">Item Details</th></tr><tr><th data-options="field:'listprice',width:80,align:'right'">List Price</th><th data-options="field:'uni

8、tcost',width:80,align:'right'">Unit Cost</th><th data-options="field:'attr1',width:240">Attribute</th><th data-options="field:'status',width:60,align:'center'">Status</th></tr>7、要用到高级查询首先把查询条件放到<di

9、v>中div的属性id="tb" style="padding:5px;height:auto" 比较美观<table>中data-options属性Toolbar：#tb设置这个属性可以吧DataGrid放到div中（高级查询注意要点查询按钮出发的事件onclick="GJCha()"function GJCha() var title = $("#title").val(); var DTselect = $("#DTselect").val(); $('#dg&#

10、39;).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 定义是否显示一行

11、页脚（通俗解释就是显示一下平均值或者是总数）Json字符串有变化在后面加（"footer":"unitcost":19.80,"listprice":60.40,"productid":"Average:","unitcost":198.00,"listprice":604.00,"productid":"Total:"）红色的意思是在那个字段下面显示，显示的数据固定左边，固定上边代码如何显示，参考固定左边上边.ht

12、ml10、设置一行的样式rowStyler: function(index,row)if (row.listprice < 30)return 'background-color:#6293BB;color:#fff;font-weight:bold;'红色的字是字段11、（2）在<table>里的<th>标签中的data-options属性1、field：字段 字段是你需要显示的字段2、width：100 字段的宽度，3、align： right 对齐方式，（left，center）；4、style：cellStyler 高亮显示；（注：func

13、tion cellStyler(value,row,index)if (value < 30)return 'background-color:#ffee00;color:red;'）5、formatter:formatPrice 高亮显示一样的效果<script>function formatPrice(val,row)if (val < 30)return '<span style="color:red;">('+val+')</span>' else return val;

14、</script>6、checkbox:true 显示复选框注：（<table>标签中data-option没有singleSelect：true（只能选择一行）这个属性就可以实现选择多行）（3）对数据进行修改1、在分页栏里面显示操作按钮在页面加载事件里面写$(function()var pager=$(#dg).datagrid(getPager):paget.pagination(buttons:iconCls:icon-search,handler:function()alert(“查看”)红色是循环体用逗号隔开改变iconCls属性显示不同图片);2、<t

15、able>标签中data-option属性写toolbar：toolbar<script type="text/javascript">var toolbar = text:'Add',iconCls:'icon-add',handler:function()alert('add');</script>红色是循环体3、既然要修改数据就会涉及到弹出窗口<div> class属设置成 class=“easyui-window”弹出用$('#my').window('

16、open')（关闭close）变成遮罩层data- options=”modal:true”或者class=“easyui-dialog”弹出用$('#dlg').dialog('open') （关闭close）这种方法<div>data-options有属性toolbar: '#dlg-toolbar',buttons: '#dlg-buttons'变成遮罩层data- options=”modal:true”（三） 表单的取值和验证1、普通文本框 class=“easyui-validatebox”2、时间

17、框 class=“easyui-datebox”时间框显示时间 class=“easyui-datetimebox”普通时间框显示的格式是“10/9/2013”；月/日/年换一个格式2013-10-15 年/月/日<input data-options="formatter:myformatter,parser:myparser"><script type="text/javascript">function myformatter(date)var y = date.getFullYear();var m = date.getM

18、onth()+1;var d = date.getDate();return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('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) && !is

19、NaN(m) && !isNaN(d)return new Date(y,m-1,d); else return new Date();</script>3、下拉列表 class=“easyui-combobox” panelHeight="auto" 这个属性自动调节高度$('#state').combobox('setValue',v); 设置下拉列表框的被选项$('#state').combobox('getValue') 获取选中项$('#state').co

20、mbobox('disable') 不可用，enable可用在后台为下拉列表框赋值：data-option里面的属性url：提供数据的路径，valueField:id alue值，textField：texttext值，panelWidth：350 宽，panelHeight：auto 高自动，formatter：formatItem 触发的事件，formatItem 事件，function formatItem(row)var s = '<span style="font-weight:bold">' + row.text +

21、'</span><br/>' +'<span style="color:#888">' + row.desc + '</span>'return s;multiple：true 可以全选json数据格式 是普通格式4、数字框<input class=”easyui-numberbox” />required 开启验证data-options=”min:10,max:90,precision:2,”最小值10，最大值90 ，有2位小数，数字可以变大变小的数字框class

22、=“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 文本框内容不合法时提示的文本信息扩展验证

23、在$(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位'

24、; , equalTo: validator: function (value, param) return $(param0).val() = value; , message: '两次密码输入不匹配' , idcard:         validator: function (value, param)            

25、 return idCard(value);        ,        message:'请输入正确的身份证号码'     );submit提交方式验证不通过不会提交$('#ff').form('submit');验证不通过不提交（ajax）if ($('#Username').validatebox(

26、9;isValid') = false) $.messager.alert('温馨提示', '密码输入不合法'); return false; Form标签添加事件data-options=“onChange： function() ”给from标签赋值function loadLocal()$('#ff').form('load',name:'myname',email:'mymai',subject:'subject',message:'message',

27、language:'en');后台动态赋值字符串格式"name":"easyui","email":"easyu","subject":"Subject Title","message":"Message Content","language":"en"$('#ff').form('load', './form/form_data1.json

28、');4、<a>的属性 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="iconC

29、ls:'icon-edit', iconAlign:'right'"iconAlign:'right' 图标靠右显示（四） TreeMenu用法<ul id=”tt” class=”easyui-tree” ></ul>data-options里面的属性url：，提供json字符串的方法json数据的格式“id”:1,“text”:”,“children”:“id”:11,“text”:”friend”,“state”: ”closed”,“children”:,animate：true 是否显示动画，check

30、box:true 显示复选框cascadeCheck:true 定义是否级联检查。onlyLeafCheck：true 定义是否只在叶节点前显示 checkbox可以编写的onClick: function(node)$(this).tree('beginEdit',node.target);显示图片在json数据中加"iconCls":"icon-save"全部收起$(tt).tree(collapseAll)全部展开$(tt).tree(expandAll)（五） 进度条<div id=”p” class=”easyui-progressbar” >设置显示多少$('#p').progressbar('setValue', value);Value是数字获取到显示的值var value = $('#p').progressbar('getValue');（六） 弹出框alert：弹出的是中文$.messager.defaults = ok: "确定", cancel: "取消" ;$.messager.alert(标