JQuery Smart UI Plugins介绍（2）— 列表控件(Grid)

傷城~ 2021-11-29 20:54 504阅读 0赞

有不少朋友反应说[JQuery Smart UI][]网站上的demo和代码下载不了，这里我说明一下，所有代码都是放在DBBank中，是可以匿名下载的，不过有时会弹出登陆框，具体原因还不知道，大家在把页面刷新一下，大多数情况应该就可以下了。以后有时间，会将下载放到其他的空间。

另外，不少的朋友问道JQuery Smart UI与JQuery UI，JQuery EasyUI等插件的异同，从某种特性上说，两者的类型既相同也不相同，JQuery Smart UI并不是以Plugin的功能丰富为卖点，其核心内容是纯前台开发的ajax开发框架、前后台统一数据接口的数据交互，快捷开发等内容。但所包含的各种的插件与各种JQuery插件类似。但Smart UI都是围绕着开发框架，以应用开发和实用为主，可能功能上相对会比较弱些。详细的内容请参见[：《JQuery Smart UI简介系列》][JQuery Smart UI 1] 。此外，Smart UI也不排斥其他的插件，针对“外来”的插件也有一套引入方案，后面版本Smart UI会陆续的引入一些优秀的JQuery插件。

上篇介绍了基础控件中的chooser,另外基础控件中还包括（Button、DatePicker等）使用都比较简单，在此不多做介绍。本篇主要介绍的是列表控件

*  **Grid**

![2010120721570985.jpg][]

Grid主要功能如下：

1.  支持Ajax数据源和固定数据源
2.  针对基础数据类型进行格式化，如：int、currence、float、date、datetime、bool、enum
3.  表头排序、表头大小设置、固定表头
4.  序号列，单选、多选列、自定义列
5.  翻页

与其他的JQuery Grid插件比较起来功能的确显的很“寒碜”，不过还算比较小巧，非压缩版24k，压缩后10k左右。

Html代码：

< div  id ="grid" ></ div >

JS代码:

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码

var  datasource  =  \[  
\{ U\_Name:  " 11 " , U\_NO:  " 444 " , U\_Brithday:  " 2010-7-25 " , U\_Salary:  " 99 " , U\_Type:  " 4 " , U\_Sex:  " 1 " , U\_Desc:  " 正正正正正正 "  \}  
, \{ U\_Name:  " 112 " , U\_NO:  " 555 " , U\_Brithday:  " 2010-7-25 " , U\_Salary:  " 99 " , U\_Type:  " 2 " , U\_Sex:  " 1 " , U\_Desc:  " 正正正正正正 "  \}  
, \{ U\_Name:  " 122 " , U\_NO:  " 66 " , U\_Brithday:  " 2010-7-25 " , U\_Salary:  " 99 " , U\_Type:  " 1 " , U\_Sex:  " 1 " , U\_Desc:  " 正正正正正正 "  \}  
, \{ U\_Name:  " 13 " , U\_NO:  " 77 " , U\_Brithday:  " 2010-7-25 " , U\_Salary:  " 99 " , U\_Type:  " 2 " , U\_Sex:  " 1 " , U\_Desc:  " 正正正正正正 "  \}  
\];  
 var  columns  =  \[  
\{ name:  " 字符 " , field:  " U\_Name " , width:  ' 60px '  \}  
, \{ name:  " 数字 " , field:  " U\_NO " , width:  ' 60px ' , sort:  true , type:  ' num '  \}  
, \{ name:  " 日期 " , field:  " U\_Brithday " , width:  ' 80px ' , sort:  true , type:  ' date '  \}  
, \{ name:  " 货币 " , field:  " U\_Salary " , width:  ' 60px ' , sort:  true , type:  ' cur ' , format:  2  \}  
, \{ name:  " 枚举 " , field:  " U\_Sex " , width:  ' 50px ' , sort:  true , type:  ' enum ' , format:  ' gender '  \}  
, \{ name:  " 长字段 " , field:  " U\_Desc " , width:  ' 120px '  \}

, \{ name: "自定义列", width: '120px', custom: '<a>$\{U\_Name\}</a>' \}  
\];

// 固定数据源   
  $( " \#grid " ).gridview(\{ width:  600 , height:  250 ,columns: columns\}, datasource, totalrecold);  
 // ajax数据源   
  $( " \#grid " ).gridview(\{ width:  600 , height:  250 ,columns: columns, ajax: \{ url:  ' fn\_us01 ' , data: \{ id:  1 , name:  2 \}\} \});  
 // 复杂属性   
  $( " \#grid " ).gridview(\{ width:  600 , height:  250 , columns: columns, showchk:  true , chkfield:  ' U\_NO ' ,  
showradio:  true , radiofield:  ' U\_NO ' , sort:  ' U\_Brithday desc ' ,  
fnBuilded:  function  (items, datas) \{ items.each( function  (i) \{  var  td  =  $( this ).children( ' td:eq(3) ' ); td.text(td.text()  \+  ' \_ '  \+  datas\[i\].U\_Type); \}) \}  
, fnSorted:  function  (ops, grid) \{ alert( " sort: "  \+  ops.sort  \+  ' \\r\\npageindex: '  \+  ops.pageindex); \}  
\}, users, totalrecold,  function  (pageindex, pagesize) \{ $( " \#grid " ).girdviewReload(\{ pageindex: pageindex, pagesize: pagesize \}, pageindex  ==  1  ?  users : users2); \});

Grid的初始化方法为：

$.fn.gridview = function (options, datasource, totalrecord, fnpagechanged)

代码说明：

datasource：为固定数据源，json格式。

columns：列设置集合。

事件说明：

fnpagechanged (pageindex, pagesize)：自定义的翻页事件，在系统翻页执行之后执行。pageindex：当前页码，pagesize：当前页显示条数

fnBuilded(items, datas)：根据数据源绑定之后执行的方法，items：列表中的项（tr）集合，类型是JQuery对象集合，datas：数据源，既datasource。该方法类似.net gridview中的DataItemBinded事件，使用该方法可以实现对列表的特殊控制。

fnSorted(ops, grid)：排序事件，ops排序参数，ops.sort:排序语句，ops.pageindex当前页，ops.pagesize当前页显示条数。

整个grid初始化的流程是，先根据列设置生成表头和表头事件、然后生成数据项模版，并且进行缓存，然后判断是否需要进行ajax请求数据，然后根据项模版和数据，之后再执行fnBuilded。

注：初始化之后如果需要重新绑定列表时（例如查询），就不能在使用初始化的方法，需要使用

$.fn.girdviewReload = function (options, datasource)

再次options则只初始化方法的简化版本，只含有ajax信息（请求和查询条件）和翻页信息。

更多详细的内大家可以参考API说明。

[详细API和Demo连接][API_Demo]

在这里先透露一下，Smart UI后面会有一个版本会特别针对grid进行扩展。比如，列编辑功能（两种模式）；一种是配合Smart UI开发框架使用，无需在grid内设置就能在对应的单元格生成可以实现各种数据类型的控件，与大家见到的编辑页面生成的控件一样。另外一种的是全局性质的“AnyEditor”，将编辑控件与显示端控件结合起来，实现任何地方的编辑功能。

**最近Plugin介绍这两篇写的比较简单，还请大家海涵，主要是想把几个基础的控件简单介绍一下，后面在看开发框架的实例实用系列时会更加方便一些，因为实例中的控件接口都重新封装过，参数配置也在不同位置配置，因此必须先简单了解一下基础控件的情况。**

转载于:https://www.cnblogs.com/zhh8077/archive/2010/12/07/1899360.html

[JQuery Smart UI]: http://smartui.chinamzz.com/
[JQuery Smart UI 1]: http://www.cnblogs.com/zhh8077/
[2010120721570985.jpg]: /images/20211129/dbf0eb0e9e9f495bbd5dd339a4498300.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211129/7c01fbd0066647fca4d40035ab7babaf.png
[API_Demo]: http://smartui.chinamzz.com/Content.htm?u=u_plug_grid