《EasyUI总结(自动保存的)》由会员分享，可在线阅读，更多相关《EasyUI总结(自动保存的)（12页珍藏版）》请在金锄头文库上搜索。
1、（一） DataGrid初步学习。EasyUI严格区分大小写用Easyui 创建前台时首先需要引用显示一个DataGrid第一步 新闻这样就可以显示一个简单的DataGrid 这些是基本的属性，在标签中data-options属性 url的值是提供Json数据的路径，第二步在listdata方法中提供json数据格式是json = total: + num + ,rows: + json + ;num：的值等于你所查询数据表中所有数据的个数json：是一个json字符串，通过list集合序列化得到的注：list集合中的数据不是干净的可以用下面的方法变成干净的数据var jsonlist = i
2、tems.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：一页显示
3、多少天数据集合的来源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 = st
4、artRow + 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=paddin
5、g: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, i
6、nt 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:）红色的
7、意思是在那个字段下面显示，显示的数据固定左边，固定上边代码如何显示，参考固定左边上边.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 高亮显示；
8、（注：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、在分页栏里面显示操
9、作按钮在页面加载事件里面写$(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属设
10、置成 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 n
