easyUI-datagrid + 假数据

前言

    在组长齐伟的带领下，我们的审批系统开发进入了HTML页面编写阶段，在这个阶段中最让我头疼的就是怎么在页面上的datagrid表格上显示一堆数据里，请了大牛亮亮过来帮忙，可是他也没解决，于是只有先放着，随着页面开发阶段，假数据也不得不提上日程啊。躲不掉，只能迎难而上了，最后解决了，忽然发现也没什么难的。回来总结一下。

过程

      首先我们是需要制造一些数据出来，以便调用。  假数据我用的是一个json文件，里面的数据如下：

     

<span style="font-family:KaiTi_GB2312;font-size:24px;">{"total":28,"rows":[{"productid":"1","typeName":"测试","flowName":"项目测试","applyDate":"2016-9-21","approvePerson":"齐伟","result":"同意"},{"productid":"2","typeName":"报销","flowName":"服务器申请","applyDate":"2016-9-21","approvePerson":"齐伟","result":"不同意"},{"productid":"3","typeName":"项目经理","flowName":"打印","applyDate":"2016-9-21","approvePerson":"齐伟","result":"未处理"},{"productid":"4","typeName":"服务器","flowName":"提高班视频申请","applyDate":"2016-9-21","approvePerson":"齐伟","result":"未处理"},{"productid":"5","typeName":"服务器","flowName":"办公人员请假","applyDate":"2016-9-21","approvePerson":"齐伟","result":"未处理"},{"productid":"6","typeName":"GCT","flowName":"生病","applyDate":"2016-9-21","approvePerson":"齐伟","result":"未处理"},{"productid":"7","typeName":"自考","flowName":"借激光笔","applyDate":"2016-9-21","approvePerson":"齐伟","result":"未处理"},{"productid":"8","typeName":"值班","flowName":"提高班文档更新","applyDate":"2016-9-21","approvePerson":"齐伟","result":"未处理"},{"productid":"9","typeName":"打印","flowName":"图书馆借书","applyDate":"2016-9-21","approvePerson":"齐伟","result":"未处理"},{"productid":"10","typeName":"图书馆","flowName":"有事","applyDate":"2016-9-21","approvePerson":"齐伟","result":"未处理"}]}</span>

    在这个过程中，知道我们传数据不一定要用json，还可以用PHP文件，这个东西虽然还没有接触过，但是经过这么一闹，也消除了对这个新东西的恐惧了。

     再者就是页面的调用和显示了，在页面的调用我们可以用javascript，也可以直接在HTML页面上显示。这里我选择后者，比较快嘛。代码如下：

   

     

<span style="font-family:KaiTi_GB2312;font-size:24px;"><table id="dgApprove" title="  " class="easyui-datagrid" style="width:100%;height:auto" method="get" url="data/datagrid_data.json" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"><span style="white-space:pre"></span><thead><span style="white-space:pre"></span><th data-options="field:'typeName',align:'center'" style="width:15%">类型名称</th><th data-options="field:'flowName',align:'center'" style="width:40%">申请摘要</th><th data-options="field:'applyDate',align:'center'" style="width:15%">申请时间</th><th data-options="field:'approvePerson',align:'center'" style="width:15%">申请人</th><th data-options="field:'result',align:'center'" style="width:15%">审批结果</th></thead></table> </span>

     在这断代码里，关键部分是URL 和method这两个属性，这两个东西缺一不可，当时是因为缺少method方法，还有field的属性值没有和json文件里的字段相对应，所以就没有“造假成功”。

   效果：

      

总结

     在解决这一个问题的过程中，让我懂得学习真的是要多到网上去查，而且还要学会举一反三。