EasyUI教程之datagrid应用

jQuery EasyUI教程之datagrid应用（三）

三、设定或定制各种功能

1、增加分页

创建DataGrid数据表格

设置“url”属性，用来装入远端服务器数据，服务器返回JSON格式数据。

Html代码代码

1.

2.url="datagrid2_getdata.php"

3.title="Load Data" iconCls="icon-save"

4.rownumbers="true" pagination="true">

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

Item ID	Product ID	List Price	Unit Cost	Attribute	Stauts

定义datagrid列，将“pagination”属性设为true，将会在datagrid底部生成一个分页工具条。 pagination会发送两个参数给服务器：

１、page: 页码，从1开始。

２、rows: 每页显示行数。

服务器端代码

Php代码

1.$page = isset($_POST['page']) ? intval($_POST['page']) : 1;

2.$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;

3.// ...

4.

5.$rs = mysql_query("select count(*) from item");

6.$row = mysql_fetch_row($rs);

7.$result["total"] = $row[0];

8.$rs = mysql_query("select * from item limit $offset,$rows");

9.$items = array();

10.while($row = mysql_fetch_object($rs)){

11. array_push($items, $row);

12.}

13.

14.$result["rows"] = $items;

15.echo json_encode($result);

2、增加搜索

创建DataGrid

创建一个有分页特性的datagrid，然后增加一个搜索工具条。

Html代码

1.

2.url="datagrid24_getdata.php" toolbar="#tb"

3.title="Load Data" iconCls="icon-save"

4.rownumbers="true" pagination="true">

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

Item ID	Product ID	List Price	Unit Cost	Attribute	Stauts

工具条定义为：

Html代码

1.

2. Item ID:

3.

4. Product ID:

5.

6.

"doSearch()">Search

7.

用户输入搜索值，然后点击搜索按钮，“doSearch”函数将会被调用：

Js代码

1.function doSearch() {

2. $('#tt').datagrid('load', {

3. itemid: $('#itemid').val(),

4. productid: $('#productid').val()

5. });

6.}

上面的代码调用“load”方法来装载新的datagrid数据，同时需要传递“itemid”和“productid”参数到服务器。

服务器端代码

Php代码

1.include 'conn.php';

2.

3.$page = isset($_POST['page']) ? intval($_POST['page']) : 1;

4.$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;

5.$itemid = isset($_POST['itemid']) ? mysql_real_escape_string($_

POST['itemid']) : '';

6.$productid = isset($_POST['productid']) ? mysql_real_escape_str

ing($_POST['productid']) : '';

7.$offset = ($page-1)*$rows;

8.

9.$result = array();

10.$where = "itemid like '$itemid%' and productid like '$productid

%'";

11.$rs = mysql_query("select count(*) from item where " . $where);

12.$row = mysql_fetch_row($rs);

13.$result["total"] = $row[0];

14.

15.$rs = mysql_query("select * from item where " . $where . " limi

t $offset,$rows");

16.$items = array();

17.while($row = mysql_fetch_object($rs)){

18. array_push($items, $row);

19.}

20.

21.$result["rows"] = $items;

22.echo json_encode($result);

3、获取选择行数据

本示例教你如何获取选择行数据。

Datagrid组件含有两个方法用来接收选择行数据：

?getSelected: 获取所选择行的第一行数据，如果没有行被选择返回null，否则返回数据记录。

?getSelections: 获取所有选择行数据，返回数组数据，里面的数组元素就是数据记录。

创建DataGrid

Html代码

1.

2.url="data/datagrid_data.json"

3.title="Load Data" iconCls="icon-save">

4.

5.

6.

7.

8.

9.

10.

11.

13.

14.

Item ID	Product ID	List Pri ce	Unit Cost	Attribute	Stauts > 12.

实例用法

获取单行数据：

Js代码

1.var row = $('#tt').datagrid('getSelected');

2.if (row){

3. alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);

4.}

获取所有行itemid：

Js代码

1.var ids = [];

2.var rows = $('#tt').datagrid('getSelections');

3.for(var i=0; i

4. ids.push(rows[i].itemid);

5.}

6.alert(ids.join('\n'));

4、增加工具条

本示例教你如何增加一个工具条到datagrid中。

创建DataGrid

Html代码

1.

2.url="data/datagrid_data.json"

3.title="DataGrid with Toolbar" iconCls="icon-save"

4.toolbar="#tb">

5.

6.

7.

8.

9.

10.

11.

12.

14.

15.

Item ID	Product ID	List Pri ce	Unit Cost	Attribute	Stauts > 13.

16.

17.

18.

ain="true" onclick="javascript:alert('Add')">Add

19.

ain="true" onclick="javascript:alert('Cut')">Cut

20.

lain="true" onclick="javascript:alert('Save')">Save

21.

5、复杂工具条

datagrid的工具条不仅仅只是包含按钮，还可以是其它的组件。为方便布局，你可以通过现有的构成datagrid工具条的DIV来定义工具条。本教程教你如何创建一个复杂的工具条，作为datagrid的组件。

创建Toolbar

Html代码

1.

2.

3.

ain="true">

4.

lain="true">

5.

lain="true">

6.

ain="true">

7.

plain="true">

8.

9.

10. Date From:

>

11. To:

12. Language:

13.

14. url="data/combobox_data.json"

15. valueField="id" textField="text">

16.

>Search

17.

18.

创建DataGrid

Html代码

1.

2.url="data/datagrid_data.json"

3.title="DataGrid - Complex Toolbar" toolbar="#tb"

4.singleSelect="true" fitColumns="true">

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

Item ID	Product ID	List Pri ce	Unit Cost	Address	Status

6、冻结列

本示例演示如何冻结数据列，当用户水平滚动数据表格时，冻结的数据列不会滚动出视图界面外。

通过定义frozenColumns属性来冻结列，冻结列属性的定义同列属性。

Js代码

1.$('#tt').datagrid({

2. title: 'Frozen Columns',

3. iconCls: 'icon-save',

4. width: 500,

5. height: 250,

6. url: 'data/datagrid_data.json',

7. frozenColumns: [[{

8. field: 'itemid',

9. title: 'Item ID',

10. width: 80

11. },

12. {

13. field: 'productid',

14. title: 'Product ID',

15. width: 80

16. },

17. ]],

18. columns: [[{

19. field: 'listprice',

20. title: 'List Price',

21. width: 80,

22. align: 'right'

23. },

24. {

25. field: 'unitcost',

26. title: 'Unit Cost',

27. width: 80,

28. align: 'right'

29. },

30. {

31. field: 'attr1',

32. title: 'Attribute',

33. width: 100

34. },

35. {

36. field: 'status',

37. title: 'Status',

38. width: 60

39. }]]

40.});

创建冻结列的datagrid可以不用编写任何javascript代码，如下面这样：

Html代码

1.

tyle="width:500px;height:250px"

2.url="data/datagrid_data.json"

3.singleSelect="true" iconCls="icon-save">

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

17.

18.

Item ID	Product ID
List Pri ce	Unit Cost	Attribute	Stauts > 16.

7、格式化数据列

下面为EasyUI DataGrid里的格式化列示例，用一个定制的列格式化器（formatter）来将文本标注为红色，如果价格低于20的话。

为格式化一个DataGrid列，我们需要设置格式化属性，它是一个函数。格式化函数含有三个参数：

?value: 当前绑定的列字段值。

?row: 当前行记录数据。

index: 当前行索引。

创建DataGrid

Html代码

1.

2.url="data/datagrid_data.json"

3.singleSelect="true" iconCls="icon-save">

4.

5.

6.

7.

8.

9.

10.

11.

13.

14.

Item ID	Product ID	r="formatPrice">List Price	Unit Cost	Attribute	Stauts > 12.

注意：“listprice”字段有一个“formatter”属性，用来指明格式化函数。

编写格式化函数

Js代码

1.function formatPrice(val,row){

2. if (val < 20){

3. return '('+val+')';

4. } else {

5. return val;

6. }

7.}

8、增加排序功能

本示例演示如何通过点击列表头来排序DataGrid数据。

DataGrid中的全部列都可以排序，可以定义哪一个列进行排序。默认列属性不会进行排序，除非列的排序属性sortable设置为true。

创建DataGrid

Js代码

1.

2.url="datagrid8_getdata.php"

3.title="Load Data" iconCls="icon-save"

4.rownumbers="true" pagination="true">

5.

6.

7.

9.

10.

11.

12.

14.

15.

Item ID th> 8.	Produc t ID	="true">List Price	"true">Unit Cost	Attribute	Stauts > 13.

定义了可排序的列为：itemid、productid、listprice、unitcost等。“attr1”列和“status”列不能排序。

DataGrid的排序会发送两个参数给服务器：

?sort: 排序列字段名。

?order: 排序方式，可以是“asc（升序）”或“desc（降序）”,默认为“asc”。

服务器端代码

Php代码

1.$page = isset($_POST['page']) ? intval($_POST['page']) : 1;

2.$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;

3.$sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'itemi

d';

4.$order = isset($_POST['order']) ? strval($_POST['order']) : 'as

c';

5.$offset = ($page-1)*$rows;

6.

7.$result = array();

8.

9.include 'conn.php';

10.

11.$rs = mysql_query("select count(*) from item");

12.$row = mysql_fetch_row($rs);

13.$result["total"] = $row[0];

14.

15.$rs = mysql_query("select * from item order by $sort $order lim

it $offset,$rows");

16.$items = array();

17.while($row = mysql_fetch_object($rs)){

18. array_push($items, $row);

19.}

20.

21.$result["rows"] = $items;

22.echo json_encode($result);

9、增加选择框

本教程教你如何放置一个checkbox 列到 DataGrid中。利用选择框用户可以即刻选择/取消所有表格数据行。

为增加一个checkbox列，我们只需简单将checkbox属性设置为true即可。代码如下所示：

Html代码

1.

style="width:550px;height:250px"

2.url="data/datagrid_data.json"

3.idField="itemid" pagination="true"

4.iconCls="icon-save">

5.

6.

7.

8.

9.

10.

11.

12.

13.

15.

16.

	Item ID	Product ID	List Pri ce	Unit Cost	Attribute	Status > 14.

上面的代码增加了一个含有checkbox属性的列，从而生成了一个选择框列。如果idField属性被设置，DataGrid的已选行在不同的页面里都可以维持。

10、增强行内编辑

Datagrid最近增加了一个可编辑功能，它使用户可增加新行到datagrid中，用户也可对单行或多行数据进行更新。

本教程教你如何创建一个带有行编辑功能的datagrid。

创建DataGrid

Js代码

1.$(function() {

2. $('#tt').datagrid({

3. title: 'Editable DataGrid',

4. iconCls: 'icon-edit',

5. width: 660,

6. height: 250,

7. singleSelect: true,

8. idField: 'itemid',

9. url: 'datagrid_data.json',

10. columns: [[{

11. field: 'itemid',

12. title: 'Item ID',

13. width: 60

14. },

15. {

16. field: 'productid',

17. title: 'Product',

18. width: 100,

19. formatter: function(value) {

20. for (var i = 0; i < products.length; i++) {

21. if (products[i].productid == value) return

products[i].name;

22. }

23. return value;

24. },

25. editor: {

26. type: 'combobox',

27. options: {

28. valueField: 'productid',

29. textField: 'name',

30. data: products,

31. required: true

32. }

33. }

34. },

35. {

36. field: 'listprice',

37. title: 'List Price',

38. width: 80,

39. align: 'right',

40. editor: {

41. type: 'numberbox',

42. options: {

43. precision: 1

44. }

45. }

46. },

47. {

48. field: 'unitcost',

49. title: 'Unit Cost',

50. width: 80,

51. align: 'right',

52. editor: 'numberbox'

53. },

54. {

55. field: 'attr1',

56. title: 'Attribute',

57. width: 150,

58. editor: 'text'

59. },

60. {

61. field: 'status',

62. title: 'Status',

63. width: 50,

64. align: 'center',

65. editor: {

66. type: 'checkbox',

67. options: {

68. on: 'P',

69. off: ''

70. }

71. }

72. },

73. {

74. field: 'action',

75. title: 'Action',

76. width: 70,

77. align: 'center',

78. formatter: function(value, row, index) {

79. if (row.editing) {

80. var s = 'Save ';

81. var c = 'Cancel';

82. return s + c;

83. } else {

84. var e = 'Edit ';

85. var d = 'Delete';

86. return e + d;

87. }

88. }

89. }]],

90. onBeforeEdit: function(index, row) {

91. row.editing = true;

92. updateActions(index);

93. },

94. onAfterEdit: function(index, row) {

95. row.editing = false;

96. updateActions(index);

97. },

98. onCancelEdit: function(index, row) {

99. row.editing = false;

100. updateActions(index);

101. }

102. });

103.});

104.

105.function updateActions(index) {

106. $('#tt').datagrid('updateRow', {

107. index: index,

108. row: {}

109. });

110.}

为了让datagrid可编辑数据，要增加一个editor属性到列属性里，编辑器会告诉datagrid如何编辑字段和如何保存字段值，这里定义了三个editor：text、combobox和checkbox。

Js代码

1.function getRowIndex(target) {

2. var tr = $(target).closest('tr.datagrid-row');

3. return parseInt(tr.attr('datagrid-row-index'));

4.}

5.function editrow(target) {

6. $('#tt').datagrid('beginEdit', getRowIndex(target));

7.}

8.function deleterow(target) {

9. $.messager.confirm('Confirm', 'Are you sure?',