JQueryEasyUI数据网格框架的基本使用

今天，让我们来谈谈这个数据网格框架的基本用法。这个框架一直是大家头疼的问题，尤其是Json数据的拼接。背景和前景非常重要。使用这个框架最重要的是要小心：不废话，代码：复制代码如下： link href=' jquery-easy ui-1 . 3 . 2/themes/default/easy ui . CSS '。-easyui最完整的样式包也可以独立引用想要使用的样式包-link href=' jquery-easyui-1 . 3 . 2/themes/icon . CSS ' rel='样式表' type=' text/CSS'/！-easyui自带图片样式包，也可以添加-script src=' http : jquery-easy ui-1 . 3 . 2/jquery-1 . 8 . 0 . min . js ' type=' text/JavaScript '/script！-我用的是easyui 1.3.2，基于jquery-1 . 8 . 0-script src=' http 3360 jquery-easy ui-1 . 3 . 2/jquery . easy ui . min . js ' type=' text/JavaScript '/script！-easyui的js包-script src=' http : jquery-easy ui-1 . 3 . 2/locale/easy ui-lang-zh _ cn . js ' type=' text/JavaScript '/script！- easyui的中文语言包默认为英文-/head body id=' layoutbody ' class=' easyui-layout ' div data-options=' region : ' north '，title:' northtitle '，split : true ' style=' height 3360 100px；/div div data-options=' region : ' South '，title:'South Title '，split : true ' style=' height : 100px；/div div data-options=' region : ' East '，iconcl 3360 ' icon-reload '，title:'East '，split : true ' style=' width : 100px；/div div data-options=' region : ' West '，title:'West '，split : true ' style=' width : 100px；/div div data-options=' region : ' center '，title : ' center title ' ' href=' HTMl page . HTM ' style=' padd : 5px；背景技术# eee飞越：隐藏；-这指向一个html page-/div-/div/body/html html html page . html代码：复制的代码如下： script type=' text/JavaScript ' charst=' utf-8 '/因为当布局框架指向href时，只取html页面正文的中间部分。所以，这一页可以这样写。//datagrid包含很多属性，所以尽量初始化datagrid framework $(function(){ $(' # DG ')。Datagrid ({url3360' getjson.ashx '，//指向一个通用处理程序或控制器，返回的数据应该是json格式。您可以直接分配Json格式的数据。我以demo中的Json数据为例，就不写后台代码了，我在后台告诉大家注意事项：title:数据显示表单’，icon cls :‘icon-add’，fit columns 3360 false。//如果设置为true，则自动使列适应表格的宽度以防止水平滚动，如果设置为false，则自动匹配大小。//toolbar设置表格顶部的工具栏，以数组形式设置idfield3360' id '。//标识列，通常设置为id，可能区分大小写。请注意，loadMsg:“正在尝试为您加载数据”。//加载数据时向用户显示语句Pagination : True。//显示底部分页工具栏行号3360 True。//显示的行数是1、2、3、4.页面尺寸3360 10。//读取页数，即向后台读取数据时传递的pagelist3360值[10。20，30]，//可以调整每页显示的数据，即每次pageSize从后台请求数据时调整数据。//由于datagrid的属性太多，我就不一一介绍了。如有必要，您可以看到它的APIsortName:“名称”。//用于初始化表的排序字段必须与数据库中的字段同名。sortOrder: 'asc '，//正列3360 [[{Field:' Code '，Title :' Code '，Width 3360 100}，{Field3360' Name '，' name '，width : 100，可排序： true}，//可排序3360 true单击此列时可以更改升序和降序{field :' addr '，title :' addr '//这里可以添加这样的方法来改变它的显示数据。//formatter :函数(值、行、索引){//if(值==' 0 '){//返回'普通角色'；//} else {//返回“特殊角色”；//}/} }]]//这里有两个方括号的原因是可以做成水晶报表。见演示})；});/script div id=' TT ' class=' easui-tab ' style=' width : 500 px；高度： 250 px；fit=' true ' border=' false ' div title=' Tab1 ' style=' padd : 20px；边框='false '表格id=' DG '/表格/div/div

这是前台请求数据时发送的数据；Json格式数据一定要是双引号的，单引号无法显示数据哦；数据格式如下：复制代码代码如下：{ 'total':239，' row ' :[{ ' code ' : ' 001 '，' name':'Name 1 '，' addr':'Address 11 '，' col4':'col4 data'}，{'code':'002 '，' name':'Name 2 '，' addr':'Address 13 '，' col4 ' 3: '这里呢，后台传递数据很重要：注意：表格邮政或者得到回来的请求中第3页代表页，面，张，版为关键，然后选择的当前页码为3轮：10代表一页的大小为10后台返回的数据的格式为：{总计：'',行数：[{},{}]}只要包含了总数tatol字段，行是具体的行数例如：Asp .净手动音量调节例子：public JsonResult Getalluserinfos(){ int page size=5；int page索引=1；里面的特里帕斯（这个。请求['page']，出页索引)；里面的特里帕斯（这个。请求[' row ']，超出页面大小);页面大小=页面大小=0?5 :页面大小；页面索引=页面索引1?1 :页面索引；可变温度=db .用户信息排序依据SkipUserInfo((页面索引-1)*页面大小).TakeUserInfo(页面大小)。ToListUserInfo()；Hashtable ht=new Hashtable()；ht['total']=db .用户信息。count()；ht[' row ']=temp；返回JSON(ht)；}Asp .网网络表单例子：公共void进程请求(HttpContext上下文){上下文.响应。内容类型='文本/纯文本；var strWebName=上下文。请求['WebName']？字符串。空的；var GoodsNo=上下文。请求['商品编号']?字符串。空的；int categoryId=0；int page索引=1；int pageSize=10里面的（上下文。请求[' row ']，超出页面大小);里面的（上下文。请求['page']，出页索引)；十进制价格left=0；十进制price right=1000000 int goodstatus=0；十进制。(上下文。请求['PriceLeft']，离开价格；十进制。(上下文。请求['PriceRight']，输出价格权)；里面的（上下文。请求['CategoryId']，超出CategoryId)；里面的（上下文。请求['商品状态'],输出商品状态);var goodsquery parameter=new goodsqueryparameter()；goodsQueryParamter .商品状态=(型号goodstatusenum)goodstatus；var ds=goodsService .getgoodsqueryparameter字符串json=字符串。空的；if (ds！=空ds .表。计数0){系统。新系统文本。StringBuilder()；int colLen=ds .表[0].列。计数；DataColumnCollection col=ds .表[0]。列；foreach(ds中的数据行行。表[0]。行){系统。新系统文本。StringBuilder()；rowJson .追加(' { ');for(int I=0；我是科尔森.追加(' \ '列[i].列名' \':\ '行[i].ToString() '\ '，')；}rowJson .追加(科尔森.ToString().TrimEnd('，')；rowJson .追加(' },');} json=' { \ ' total \ ' : ' ds .表[0]。行[0]['sumGoods']'，\ ' row ' :[' RowJSON .ToString().TrimEnd('，')']} '；}上下文。回应。写(JSON)；}ASP .网中有一个类也可以序列化Json格式数据；