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

     关于作者：

• 郑云飞, 程序员Java（web前端，web后端，oracle数据库or mysql数据库）
• 
  

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

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

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

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

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

Example

Below is a working datagrid example.

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.

Methods

Fuel UX's datagrid exposes a method for reloading the grid.

Options

Events

Fuel UX's datagrid exposes an event for hooking into its functionality.

但是我感觉官方给的这个文档，写的太过于简单，初学者很难将这个表格动态的显示出来，因为很多人不知道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有这么强大的功能，我没有发现，求赐教。。。。