如何在SlickGrid中使用json

SlickGrid: https://github.com/mleibman/SlickGrid真是一个很不错的快速，轻量的表格控件js库。

在它上面使用json也是很方便的，employees.php：

1  function get_json(&$dyn_event) {
2      $query = mysql_query("SELECT *  FROM `users` WHERE `type` = '0'");
3 
4      $i = 0;
5      while ($row = mysql_fetch_array($query, 0)) 
6      {
7          $dyn_event[$i]['ID'] = $row["12"];
8          $dyn_event[$i]['firstname'] = $row["3"];
9          $dyn_event[$i]['lastname'] = $row["4"];
10         $dyn_event[$i]['email'] = $row["5"];
11         $dyn_event[$i]['account'] = '10';
12         $dyn_event[$i]['start'] = '01/01/2013';
13        
14         $i++;
15     }
16
17     return true;
18 }
19
20 function output_json_employees() {
21     $array_json = array();
22     get_json($array_json);
23     echo str_replace('\/','/',json_encode($array_json));   
24 }

我们所需要保证的是输出的格式为：

1 "ID:0,firstname:Patricle,lastname:Jane,email:jane@test.com,account:10,start:01/01/2013"

employees_manage.php，中的js代码，其中最重要的是第29和30行，调用employees.php中输出json的function-output_json_employees()给js变量data:

1  <script>
2    function requiredFieldValidator(value) {
3      if (value == null || value == undefined || !value.length) {
4        return {valid: false, msg: "This is a required field"};
5      } else {
6        return {valid: true, msg: null};
7      }
8    }
9 
10   var grid;
11   var data = [];
12   var columns = [
13     {id: "ID", name: "ID", field: "ID", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
14     {id: "firstname", name: "Firstname", field: "firstname", width: 100, editor: Slick.Editors.LongText},
15     {id: "lastname", name: "Lastname", field: "lastname", width: 100, editor: Slick.Editors.LongText},
16     {id: "email", name: "Email", field: "email", width: 200, editor: Slick.Editors.LongText},
17     {id: "account", name: "Account", field: "account", minWidth: 140, editor: Slick.Editors.LongText},
18     {id: "start", name: "Start", field: "start", minWidth: 140, editor: Slick.Editors.Date},
19   ];
20   var options = {
21     editable: true,
22     enableAddRow: true,
23     enableCellNavigation: true,
24     asyncEditorLoading: false,
25     autoEdit: false
26   };
27
28   $(function () {
29     <?php include 'employees.php';?>   
30     data = <?php output_json_employees();?>;
31                
32     grid = new Slick.Grid("#myGrid", data, columns, options);
33
34     grid.setSelectionModel(new Slick.CellSelectionModel());
35
36     grid.onAddNewRow.subscribe(function (e, args) {
37       var item = args.item;
38       grid.invalidateRow(data.length);
39       data.push(item);
40       grid.updateRowCount();
41       grid.render();
42     });
43   })
44 </script>