关于作者:
- 郑云飞, 程序员Java(web前端,web后端,oracle数据库or mysql数据库)
- 艺名:天放
- weibo:@tianFang
- blog: zhengyunfei.iteye.com
- email: zhengyunfei8@gmail.com
下班之余,没事干写的东西吧,最近下班都很晚的,到家也就8,9,10来点了。看个电影时间不够,看个电视剧时间更不够,睡觉吧,目前还不困,那就写点东西吧,总结一下工作一天遇到的问题。
首页我喜欢听着广播,写着博客。先打开咕咕收音机,锁定中国之声。
贴上一张图片,给苍白的博客,增添一些活力,以至于读者朋友们看着不会乏味。
首先。我先想想怎么才能描述清楚这个问题。
我下面要说的是datagrid表格显示的问题。Fuel UX datagrid。先来介绍一下datagrid,官方文档内容如下:
Example
Below is a working datagrid example.
Mexico City | MX | 12294193 | capital of a political entity |
Manila | PH | 10444527 | capital of a political entity |
Dhaka | BD | 10356500 | capital of a political entity |
Seoul | KR | 10349312 | capital of a political entity |
Jakarta | ID | 8540121 | capital of a political entity |
Tokyo | JP | 8336599 | capital of a political entity |
Taipei | TW | 7871900 | capital of a political entity |
Beijing | CN | 7480601 | capital of a political entity |
Bogotá | CO | 7102602 | capital of a political entity |
Hong Kong | HK | 7012738 | capital of a political entity |
Using datagrid
Call the datagrid via javascript:
$('#MyGrid').datagrid({ dataSource: dataSource, stretchHeight: true })
Data Source
Provide a data source to the datagrid to supply column information and data. Your data source must support the following two methods.
columns | (none) | Returns an array of objects containing column information |
data | options (object), callback(function) | The options parameter contains search, sortProperty, sortDirection, pageIndex, and pageSize. Retrieve data then callcallback with an object containing data, start, end, count, pages, and page. View the source of this page for an example static data source. |
Methods
Fuel UX's datagrid exposes a method for reloading the grid.
reload | This method causes the datagrid to reload the data from the dataSource and return to the first page. |
clearSelectedItems | If row selection is enabled, this method will clear all rows currently selected. |
setSelectedItems | If row selection is enabled, this method will programmatically set specified rows within the datagrid by each element's primary key value. The argument passed to this method should be an array of string values. Note, this relies on the _data array being included in the DataSource as provided in the samples directory. |
getSelectedItems | If row selection is enabled, this method returns an object containing all the selected items within the datagrid. Each property in the returned object represents a selected value (by primary key) with the corresponding values being the selected data elements. |
Options
dataSource | See Data Source section above |
null (must be provided) |
dataOptions | Options for current data to be displayed | { pageIndex: 0, pageSize: 10 } |
stretchHeight | Introduced in version 2.2. Enables stretchHeight rendering. This sets the datagrid's height to a stable height, matching its parent element. The appearance of the datagrid becomes much more consistent while rendering and displaying different numbers of rows. Rows will scroll within the table when they exceed the available height. | false |
loadingHTML | HTML for loading indicator | (bootstrap progress indicator) |
itemsText | Text for plural items | items |
itemText | Text for singular item | item |
enableSelect | Boolean value to enable/disable datagrid row selection | false |
primaryKey | If datagrid row selection is enabled, this specifies the property in each data element which should be used as the primary key. |
null (must be provided) |
multiSelect | If datagrid row selection is enabled, multiple rows may selected with a boolean value of true , or disallowed with a value of false . |
true |
Events
Fuel UX's datagrid exposes an event for hooking into its functionality.
loaded | This event is fired after the grid loads or reloads data |
itemSelected | If row selection is enabled, this event is fired when a row is selected. The value of the selected row is returned. |
itemDeselected | If row selection is enabled, this event is fired when a row is deselected. The value of the deselected row is returned. |
但是我感觉官方给的这个文档,写的太过于简单,初学者很难将这个表格动态的显示出来,因为很多人不知道datagrid返回来的数据格式是什么样子的。
下面我们看一下jquery LigerUI的官方文档是如何介绍datagrid表格的。
下面我们点击查看源码:
function f_initGrid() { g = manager = $("#maingrid").ligerGrid({ columns: [ { display: '主键', name: 'ID', width: 50, type: 'int',frozen:true }, { display: '名字', name: 'RealName', editor: { type: 'text' } }, { display: '性别', width: 50, name: 'Sex',type:'int', editor: { type: 'select', data: sexData, valueColumnName: 'Sex' }, render: function (item) { if (parseInt(item.Sex) == 1) return '男'; return '女'; } }, { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} }, { display: '部门', name: 'DepartmentID', width: 120, isSort: false, editor: { type: 'select', data: DepartmentList, valueColumnName: 'DepartmentID', displayColumnName: 'DepartmentName' }, render: function (item) { for (var i = 0; i < DepartmentList.length; i++) { if (DepartmentList[i]['DepartmentID'] == item.DepartmentID) return DepartmentList[i]['DepartmentName'] } return item.DepartmentName; } } ], onSelectRow: function (rowdata, rowindex) { $("#txtrowindex").val(rowindex); }, enabledEdit: true, clickToEdit: false, isScroll: false, data:EmployeeData, width: '100%' }); }
下面我们再查看一下datagrid的数据格式data:EmployeeData
var EmployeeData = { Rows: [{ "__status": null, "ID": 1, "DepartmentID": 3, "RealName": "fewf", "DepartmentName": "销售部", "Sex": 1, "Age": 2433, "IncomeDay": new Date(1301356800000), "Phone": "159244332", "Address": "变为不为恶" }, { "__status": null, "ID": 2, "DepartmentID": 1, "RealName": "李三34", "DepartmentName": "李白", "Sex": 2, "Age": 23, "IncomeDay": new Date(1301299200000), "Phone": "2323232323", "Address": "3434" }, { "__status": null, "ID": 3, "DepartmentID": 3, "RealName": "吴彬3", "DepartmentName": "销售部", "Sex": 2, "Age": 26, "IncomeDay": new Date(1294128000000), "Phone": "159244332", "Address": "1311飞屋服务费3434343433434" }, { "__status": null, "ID": 5, "DepartmentID": 2, "RealName": "吴久", "DepartmentName": "研发中心", "Sex": 2, "Age": 29, "IncomeDay": new Date(1288569600000), "Phone": "159244332", "Address": "3444444" }, { "__status": null, "ID": 6, "DepartmentID": 3, "RealName": "陈民", "DepartmentName": "销售部", "Sex": 2, "Age": 21, "IncomeDay": new Date(1297728000000), "Phone": null, "Address": "3435333" }, { "__status": null, "ID": 7, "DepartmentID": 3, "RealName": "陈留", "DepartmentName": "销售部", "Sex": 1, "Age": 32, "IncomeDay": new Date(1298851200000), "Phone": null, "Address": "3333444444444444" }, { "__status": null, "ID": 8, "DepartmentID": 1, "RealName": "谢银223", "DepartmentName": "公司", "Sex": 1, "Age": 13, "IncomeDay": new Date(1298880000000), "Phone": null, "Address": "34344555555555" }, { "__status": null, "ID": 10, "DepartmentID": 2, "RealName": "陈元为2", "DepartmentName": "研发中心", "Sex": 2, "Age": 16, "IncomeDay": new Date(1298851200000), "Phone": null, "Address": "34343434343434" }, { "__status": null, "ID": 11, "DepartmentID": 1, "RealName": "大为", "DepartmentName": "公司", "Sex": 1, "Age": 19, "IncomeDay": new Date(1301472000000), "Phone": null, "Address": "3434444444" }, { "__status": null, "ID": 21, "DepartmentID": 4, "RealName": "444", "DepartmentName": "市场部", "Sex": 2, "Age": 20, "IncomeDay": new Date(1298880000000), "Phone": null, "Address": "444" }, { "__status": null, "ID": 22, "DepartmentID": 1, "RealName": "22", "DepartmentName": "公司", "Sex": 1, "Age": 20, "IncomeDay": new Date(1301270400000), "Phone": null, "Address": "22" }, { "__status": null, "ID": 23, "DepartmentID": 2, "RealName": "22", "DepartmentName": "研发中心", "Sex": 1, "Age": 20, "IncomeDay": new Date(1301270400000), "Phone": null, "Address": "2224444444" }, { "__status": null, "ID": 26, "DepartmentID": 4, "RealName": "232323", "DepartmentName": "市场部", "Sex": 2, "Age": 0, "IncomeDay": new Date(1306108800000), "Phone": null, "Address": "222222222222222"}], Total: 13 };
这样就可以很清楚的看到datagrid数据的组成,有Rows和ToTal这2个属性组成,在后台我们只需要查询一个List<Object> 作为datagrid的Rows ,然后再查询List<Object>的size作为datagrid的Total,燃火转换为json个数的数据,这样就很容易的显示datagrid的表格了。
再看看bootstrap的datagrid的官方文档,至少我不知道datagrid表格的格式到底是什么样子的,我怎么返回一个json格式的数据,datagrid才能显示出来。
看看bootstrap datagrid.js也没有看出来datagrid的数据格式到底张什么样子。
好吧,因为我工作中用到这个,我已经知道他张什么样子了。现在就告诉大家吧。
datagrid的格式是这样的:
{ page:1,pages:10,totalCount:30,start:1,end:10,data: [{ "__status": null, "ID": 1, "DepartmentID": 3, "RealName": "fewf", "DepartmentName": "销售部", "Sex": 1, "Age": 2433, "IncomeDay": new Date(1301356800000), "Phone": "159244332", "Address": "变为不为恶" }, { "__status": null, "ID": 2, "DepartmentID": 1, "RealName": "李三34", "DepartmentName": "公司", "Sex": 2, "Age": 23, "IncomeDay": new Date(1301299200000), "Phone": "2323232323", "Address": "3434" }, { "__status": null, "ID": 3, "DepartmentID": 3, "RealName": "吴彬3", "DepartmentName": "销售部", "Sex": 2, "Age": 26, "IncomeDay": new Date(1294128000000), "Phone": "159244332", "Address": "1311飞屋服务费3434343433434" }, { "__status": null, "ID": 5, "DepartmentID": 2, "RealName": "吴久", "DepartmentName": "研发中心", "Sex": 2, "Age": 29, "IncomeDay": new Date(1288569600000), "Phone": "159244332", "Address": "3444444" }, { "__status": null, "ID": 6, "DepartmentID": 3, "RealName": "陈民", "DepartmentName": "销售部", "Sex": 2, "Age": 21, "IncomeDay": new Date(1297728000000), "Phone": null, "Address": "3435333" }, { "__status": null, "ID": 7, "DepartmentID": 3, "RealName": "陈留", "DepartmentName": "销售部", "Sex": 1, "Age": 32, "IncomeDay": new Date(1298851200000), "Phone": null, "Address": "3333444444444444" }, { "__status": null, "ID": 8, "DepartmentID": 1, "RealName": "谢银223", "DepartmentName": "公司", "Sex": 1, "Age": 13, "IncomeDay": new Date(1298880000000), "Phone": null, "Address": "34344555555555" }, { "__status": null, "ID": 10, "DepartmentID": 2, "RealName": "陈元为2", "DepartmentName": "研发中心", "Sex": 2, "Age": 16, "IncomeDay": new Date(1298851200000), "Phone": null, "Address": "34343434343434" }, { "__status": null, "ID": 11, "DepartmentID": 1, "RealName": "大为", "DepartmentName": "公司", "Sex": 1, "Age": 19, "IncomeDay": new Date(1301472000000), "Phone": null, "Address": "3434444444" }, { "__status": null, "ID": 21, "DepartmentID": 4, "RealName": "444", "DepartmentName": "市场部", "Sex": 2, "Age": 20, "IncomeDay": new Date(1298880000000), "Phone": null, "Address": "444" }, { "__status": null, "ID": 22, "DepartmentID": 1, "RealName": "22", "DepartmentName": "公司", "Sex": 1, "Age": 20, "IncomeDay": new Date(1301270400000), "Phone": null, "Address": "22" }, { "__status": null, "ID": 23, "DepartmentID": 2, "RealName": "22", "DepartmentName": "研发中心", "Sex": 1, "Age": 20, "IncomeDay": new Date(1301270400000), "Phone": null, "Address": "2224444444" }, { "__status": null, "ID": 26, "DepartmentID": 4, "RealName": "232323", "DepartmentName": "市场部", "Sex": 2, "Age": 0, "IncomeDay": new Date(1306108800000), "Phone": null, "Address": "222222222222222"}]};
暂时用ligerui datagrid的数据修改了一下。
好了,后台返回这样的格式, datagrid前台只要这样写就可以显示漂亮的表格了:
$('#MyGrid').datagrid({ dataSource: new AjaxDataSource({ columns: [{ property: "loginName", label: '用户名', sortable: true }, { property: 'loginEmail', label: '邮箱号码', sortable: true }, { property: 'province', label: '省', sortable: true }, { property: 'city', label: '市', sortable: true } ,{ property: 'operation', label: '操作', sortable: true , width:'300px' }] }) });
property 只要和后台返回过来的LIst<Bo> Bo的属性相对应,数据就会显示出来,比如loginName,那么在Bo中也有一个属性loginName,但是现在有一个问题,假如provice和city不在Bo里面,而是存在另一个Bo里面假如存在CityBo里面,Bo里面有一个属相cityBo,那么我想显示CityBo里面的provice和city,前台页面 property: 'province',该如何写才能让datagrid显示出来,
理论上通过cityBo.provice就可以显示出来,但是跟预期的不一样,有点让人失望,显示不出来,这样就只能再在Bo里面添加2个属性,provice和city,貌似这样和cityBo重复了。
目前我暂时还是在Bo里面新增2个字段,怎么样不新增字段而是通过cityBo.procice就可以显示在datagrid里面呢?
另外一个问题,如果我想自定义列显示,我们目前是在java类里面自定义一个列,在java类里面拼接字符串,有点不太合理,看下jqueryligerUI的datagrid的自定义列显得比较强大。
{ display: '性别', width: 50, name: 'Sex',type:'int', editor: { type: 'select', data: sexData, valueColumnName: 'Sex' }, render: function (item) { if (parseInt(item.Sex) == 1) return '男'; return '女'; } }
加一个render:funtion就可以自定义列,没必要在java代码里去拼接,而且如果要让表格变为可编辑的,只需要加一个editor就可以了。而且可以自定义列的宽度。类型。
还是bootstrap有这么强大的功能,我没有发现,求赐教。。。。
相关推荐
jeasyui-datagrid-datagrid 开发参考
SSM+EasayUI-DataGrid表格展现数据库数据。包含后台代码和数据库建表语句
jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制计算机,而不是计算机控制用户;减少用户的记忆负担;保持界面一致。 给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头...
easyui-datagrid2-demo.zip
easyui-datagrid之间拖拽效果demo
ASP.NET-DataGrid,ASP.NET-DataGrid
wpf-datagrid-access DB,可以更新数据到Access数据库
请在您的项目中包含样式表index.css 。 如果你使用webpack和css-loader ,你可以要求它: require('react-datagrid/index.css') 例子 var React = require ( 'react' ) var DataGrid = require ( 'react-datagrid' ...
项目工具代码,中间包含了service和controller两层,model可以自己定义
Spring Boot 系列教程 EasyUI-datagrid
easyui-datagrid导出至Excel插件,中文没有乱码问题。
easyui-datagrid21-demo.zip
ASP.NET-DataGrid的应用和使用技巧.
EasyUI_05-datagrid-src.zip
flex-datagrid-advancedDataGrid-demo,做的datagrid及advanceddatagrid的例子,希望大家喜欢
个人收藏的插件,jquery-easyui-datagrid,分享给大家。
Laravel开发-laravel-datagrid-builder Laravel数据报生成器-使用jquery bootgrid
easyui-datagrid官方demo,包含datagrid中combobox的使用方法,以及选择行,删除行,编辑行等实现方法。浏览器直接打开html可能无法访问他的data/datagrid_data.json里的数据,可以将datagrid_data.json里的数据放到...
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也不咋的,但是终归也是官方出品,同时其功能也算是比较丰富。之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为...