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

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”title=信息记录 style=width: 700px; height: 250px data-options=”url:’/new/listdata’”theadtrth data-options=” field:’new’” 新闻/th/tr/thead/table这样就可以显示一个简单的DataGrid 这些是基本的属性，在table标签中data-options属性 url的值是提供Json数据的路径，第二步在listdata方法中提供json数据格式是json = {\total\: + num + ,\rows\: + json + };num：的值等于你所查询数据表中所有数据的个数json：是一个json字符串，通过list集合序列化得到的注：list集合中的数据不是干净的可以用下面的方法变成干净的数据var jsonlist = items.Select(p = new{id = p.id,}DataGrid升级进化EasyUI严格区分大小写这样数据就可以显示出来了，功能很少现在将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.OrderByDescending(d = d.MessageId).Skip(( 1) * row).Take(row).ToList();B、ADO.net用存储过程A、存储过程的书写CREATEprocUP_PageByRowNumber(@pageIndexint,@pageSizeint)ASDECLARE@startRowint,@endRowintSet@startRow=(@pageIndex- 1)*@pageSize+1SET@endRow=@startRow+@pageSize-1 SELECT*FROM(SELECT*,ROW_NUMBER()OVER (ORDERBYid)ASRowNumberFROMStudent)TWHERET.RowNumberBETWEEN@startRowAND@endRow）5、collapsible：true 设置datagrid可以折叠；6、显示这样的效果trthdata-options=field:itemid,width:80rowspan=2Item ID/ththdata-options=field:productid,width:100rowspan=2Product/ththcolspan=4Item Details/th/trtrthdata-options=field:listprice,width:80,align:rightList Price/ththdata-options=field:unitcost,width:80,align:rightUnit Cost/ththdata-options=field:attr1,width:240Attribute/ththdata-options=field:status,width:60,align:centerStatus/th/tr7、要用到高级查询首先把查询条件放到div中div的属性id=tb style=padding:5px;height:auto比较美观table中data-options属性Toolbar：‘#tb’设置这个属性可以吧DataGrid放到div中（高级查询注意要点查询按钮出发的事件onclick=GJCha()function GJC