有不少朋友反应说JQuery Smart UI网站上的demo和代码下载不了,这里我说明一下,所有代码都是放在DBBank中,是可以匿名下载的,不过有时会弹出登陆框,具体原因还不知道,大家在把页面刷新一下,大多数情况应该就可以下了。以后有时间,会将下载放到其他的空间。
另外,不少的朋友问道JQuery Smart UI与JQuery UI,JQuery EasyUI等插件的异同,从某种特性上说,两者的类型既相同也不相同,JQuery Smart UI并不是以Plugin的功能丰富为卖点,其核心内容是纯前台开发的ajax开发框架、前后台统一数据接口的数据交互,快捷开发等内容。但所包含的各种的插件与各种JQuery插件类似。但Smart UI都是围绕着开发框架,以应用开发和实用为主,可能功能上相对会比较弱些。详细的内容请参见:《JQuery Smart UI简介系列》 。此外,Smart UI也不排斥其他的插件,针对“外来”的插件也有一套引入方案,后面版本Smart UI会陆续的引入一些优秀的JQuery插件。
上篇介绍了基础控件中的chooser,另外基础控件中还包括(Button、DatePicker等)使用都比较简单,在此不多做介绍。本篇主要介绍的是列表控件
- Grid
Grid主要功能如下:
- 支持Ajax数据源和固定数据源
- 针对基础数据类型进行格式化,如:int、currence、float、date、datetime、bool、enum
- 表头排序、表头大小设置、固定表头
- 序号列,单选、多选列、自定义列
- 翻页
与其他的JQuery Grid插件比较起来功能的确显的很“寒碜”,不过还算比较小巧,非压缩版24k,压缩后10k左右。
Html代码:
<div id="grid"></div>
JS代码:
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的初始化方法为:
代码说明:
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。
注:初始化之后如果需要重新绑定列表时(例如查询),就不能在使用初始化的方法,需要使用
再次options则只初始化方法的简化版本,只含有ajax信息(请求和查询条件)和翻页信息。
更多详细的内大家可以参考API说明。
在这里先透露一下,Smart UI后面会有一个版本会特别针对grid进行扩展。比如,列编辑功能(两种模式);一种是配合Smart UI开发框架使用,无需在grid内设置就能在对应的单元格生成可以实现各种数据类型的控件,与大家见到的编辑页面生成的控件一样。另外一种的是全局性质的“AnyEditor”,将编辑控件与显示端控件结合起来,实现任何地方的编辑功能。
最近Plugin介绍这两篇写的比较简单,还请大家海涵,主要是想把几个基础的控件简单介绍一下,后面在看开发框架的实例实用系列时会更加方便一些,因为实例中的控件接口都重新封装过,参数配置也在不同位置配置,因此必须先简单了解一下基础控件的情况。