工作中遇到的问题-datagrid表格显示的问题

     关于作者：

• 郑云飞, 程序员Java（web前端，web后端，oracle数据库or mysql数据库）
• 艺名：天放
• weibo：@tianFang
• blog: zhengyunfei.iteye.com
• email: [e-mail]

      

     下班之余，没事干写的东西吧，最近下班都很晚的，到家也就8，9，10来点了。看个电影时间不够，看个电视剧时间更不够，睡觉吧，目前还不困，那就写点东西吧，总结一下工作一天遇到的问题。

     首页我喜欢听着广播，写着博客。先打开咕咕收音机，锁定中国之声。

贴上一张图片，给苍白的博客，增添一些活力，以至于读者朋友们看着不会乏味。

       首先。我先想想怎么才能描述清楚这个问题。

我下面要说的是datagrid表格显示的问题。Fuel UX datagrid。先来介绍一下datagrid，官方文档内容如下：

Example

Below is a working datagrid example.

Geographic Data Sample

 

 

Name Country Population Type

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

1 - 10 of 146 items 

10 

 Per Page

 Page 

 

 of 15 

---

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.

Name Parameters Description

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.

Method Description

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

Options Description Default Value

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.

Event Description

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有这么强大的功能，我没有发现，求赐教。。。。