jQuery EasyUI教程之datagrid应用

三、设定或定制各种功能

1、增加分页

创建DataGrid数据表格

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

Html代码代码  

  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
  2. url="datagrid2_getdata.php"
  3. title="Load Data" iconCls="icon-save"
  4. rownumbers="true" pagination="true">
  5. <thead>
  6. <tr>
  7. <th field="itemid" width="80">Item ID</th>
  8. <th field="productid" width="80">Product ID</th>
  9. <th field="listprice" width="80" align="right">List Price</th>
  10. <th field="unitcost" width="80" align="right">Unit Cost</th>
  11. <th field="attr1" width="150">Attribute</th>
  12. <th field="status" width="60" align="center">Stauts</th>
  13. </tr>
  14. </thead>
  15. </table>

定义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. $rs = mysql_query("select count(*) from item");
  5. $row = mysql_fetch_row($rs);
  6. $result["total"] = $row[0];
  7. $rs = mysql_query("select * from item limit $offset,$rows");
  8. $items = array();
  9. while($row = mysql_fetch_object($rs)){
  10. array_push($items, $row);
  11. }
  12. $result["rows"] = $items;
  13. echo json_encode($result);

2、增加搜索

创建DataGrid

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

Html代码  

  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
  2. url="datagrid24_getdata.php" toolbar="#tb"
  3. title="Load Data" iconCls="icon-save"
  4. rownumbers="true" pagination="true">
  5. <thead>
  6. <tr>
  7. <th field="itemid" width="80">Item ID</th>
  8. <th field="productid" width="80">Product ID</th>
  9. <th field="listprice" width="80" align="right">List Price</th>
  10. <th field="unitcost" width="80" align="right">Unit Cost</th>
  11. <th field="attr1" width="150">Attribute</th>
  12. <th field="status" width="60" align="center">Stauts</th>
  13. </tr>
  14. </thead>
  15. </table>

工具条定义为：

Html代码  

  1. <div id="tb" style="padding:3px">
  2. <span>Item ID:</span>
  3. <input id="itemid" style="line-height:26px;border:1px solid #ccc">
  4. <span>Product ID:</span>
  5. <input id="productid" style="line-height:26px;border:1px solid #ccc">
  6. <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
  7. </div>

用户输入搜索值，然后点击搜索按钮，“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. $page = isset($_POST[‘page‘]) ? intval($_POST[‘page‘]) : 1;
  3. $rows = isset($_POST[‘rows‘]) ? intval($_POST[‘rows‘]) : 10;
  4. $itemid = isset($_POST[‘itemid‘]) ? mysql_real_escape_string($_POST[‘itemid‘]) : ‘‘;
  5. $productid = isset($_POST[‘productid‘]) ? mysql_real_escape_string($_POST[‘productid‘]) : ‘‘;
  6. $offset = ($page-1)*$rows;
  7. $result = array();
  8. $where = "itemid like ‘$itemid%‘ and productid like ‘$productid%‘";
  9. $rs = mysql_query("select count(*) from item where " . $where);
  10. $row = mysql_fetch_row($rs);
  11. $result["total"] = $row[0];
  12. $rs = mysql_query("select * from item where " . $where . " limit $offset,$rows");
  13. $items = array();
  14. while($row = mysql_fetch_object($rs)){
  15. array_push($items, $row);
  16. }
  17. $result["rows"] = $items;
  18. echo json_encode($result);

3、获取选择行数据

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

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

  • getSelected: 获取所选择行的第一行数据，如果没有行被选择返回null，否则返回数据记录。
  • getSelections: 获取所有选择行数据，返回数组数据，里面的数组元素就是数据记录。

创建DataGrid

Html代码  

  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
  2. url="data/datagrid_data.json"
  3. title="Load Data" iconCls="icon-save">
  4. <thead>
  5. <tr>
  6. <th field="itemid" width="80">Item ID</th>
  7. <th field="productid" width="80">Product ID</th>
  8. <th field="listprice" width="80" align="right">List Price</th>
  9. <th field="unitcost" width="80" align="right">Unit Cost</th>
  10. <th field="attr1" width="150">Attribute</th>
  11. <th field="status" width="60" align="center">Stauts</th>
  12. </tr>
  13. </thead>
  14. </table>

实例用法

获取单行数据：

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<rows.length; i++){
  4. ids.push(rows[i].itemid);
  5. }
  6. alert(ids.join(‘\n‘));

4、增加工具条

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

Html代码  

  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
  2. url="data/datagrid_data.json"
  3. title="DataGrid with Toolbar" iconCls="icon-save"
  4. toolbar="#tb">
  5. <thead>
  6. <tr>
  7. <th field="itemid" width="80">Item ID</th>
  8. <th field="productid" width="80">Product ID</th>
  9. <th field="listprice" width="80" align="right">List Price</th>
  10. <th field="unitcost" width="80" align="right">Unit Cost</th>
  11. <th field="attr1" width="150">Attribute</th>
  12. <th field="status" width="60" align="center">Stauts</th>
  13. </tr>
  14. </thead>
  15. </table>
  16. <div id="tb">
  17. <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert(‘Add‘)">Add</a>
  18. <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert(‘Cut‘)">Cut</a>
  19. <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert(‘Save‘)">Save</a>
  20. </div>

5、复杂工具条

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


 
创建Toolbar

Html代码  

  1. <div id="tb" style="padding:5px;height:auto">
  2. <div style="margin-bottom:5px">
  3. <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
  4. <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
  5. <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
  6. <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
  7. <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
  8. </div>
  9. <div>
  10. Date From: <input class="easyui-datebox" style="width:80px">
  11. To: <input class="easyui-datebox" style="width:80px">
  12. Language:
  13. <input class="easyui-combobox" style="width:100px"
  14. url="data/combobox_data.json"
  15. valueField="id" textField="text">
  16. <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
  17. </div>
  18. </div>

创建DataGrid

Html代码  

  1. <table class="easyui-datagrid" style="width:600px;height:250px"
  2. url="data/datagrid_data.json"
  3. title="DataGrid - Complex Toolbar" toolbar="#tb"
  4. singleSelect="true" fitColumns="true">
  5. <thead>
  6. <tr>
  7. <th field="itemid" width="60">Item ID</th>
  8. <th field="productid" width="80">Product ID</th>
  9. <th field="listprice" align="right" width="70">List Price</th>
  10. <th field="unitcost" align="right" width="70">Unit Cost</th>
  11. <th field="attr1" width="200">Address</th>
  12. <th field="status" width="50">Status</th>
  13. </tr>
  14. </thead>
  15. </table>

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. <table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:500px;height:250px"
  2. url="data/datagrid_data.json"
  3. singleSelect="true" iconCls="icon-save">
  4. <thead frozen="true">
  5. <tr>
  6. <th field="itemid" width="80">Item ID</th>
  7. <th field="productid" width="80">Product ID</th>
  8. </tr>
  9. </thead>
  10. <thead>
  11. <tr>
  12. <th field="listprice" width="80" align="right">List Price</th>
  13. <th field="unitcost" width="80" align="right">Unit Cost</th>
  14. <th field="attr1" width="150">Attribute</th>
  15. <th field="status" width="60" align="center">Stauts</th>
  16. </tr>
  17. </thead>
  18. </table>

7、格式化数据列

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

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

  • value: 当前绑定的列字段值。
  • row: 当前行记录数据。
  • index: 当前行索引。

创建DataGrid

Html代码  

  1. <table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"
  2. url="data/datagrid_data.json"
  3. singleSelect="true" iconCls="icon-save">
  4. <thead>
  5. <tr>
  6. <th field="itemid" width="80">Item ID</th>
  7. <th field="productid" width="80">Product ID</th>
  8. <th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th>
  9. <th field="unitcost" width="80" align="right">Unit Cost</th>
  10. <th field="attr1" width="100">Attribute</th>
  11. <th field="status" width="60" align="center">Stauts</th>
  12. </tr>
  13. </thead>
  14. </table>

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

编写格式化函数

Js代码  

  1. function formatPrice(val,row){
  2. if (val < 20){
  3. return ‘<span style="color:red;">(‘+val+‘)</span>‘;
  4. } else {
  5. return val;
  6. }
  7. }

8、增加排序功能

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

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

创建DataGrid

Js代码  

  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
  2. url="datagrid8_getdata.php"
  3. title="Load Data" iconCls="icon-save"
  4. rownumbers="true" pagination="true">
  5. <thead>
  6. <tr>
  7. <th field="itemid" width="80" sortable="true">Item ID</th>
  8. <th field="productid" width="80" sortable="true">Product ID</th>
  9. <th field="listprice" width="80" align="right" sortable="true">List Price</th>
  10. <th field="unitcost" width="80" align="right" sortable="true">Unit Cost</th>
  11. <th field="attr1" width="150">Attribute</th>
  12. <th field="status" width="60" align="center">Stauts</th>
  13. </tr>
  14. </thead>
  15. </table>

定义了可排序的列为：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‘]) : ‘itemid‘;
  4. $order = isset($_POST[‘order‘]) ? strval($_POST[‘order‘]) : ‘asc‘;
  5. $offset = ($page-1)*$rows;
  6. $result = array();
  7. include ‘conn.php‘;
  8. $rs = mysql_query("select count(*) from item");
  9. $row = mysql_fetch_row($rs);
  10. $result["total"] = $row[0];
  11. $rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");
  12. $items = array();
  13. while($row = mysql_fetch_object($rs)){
  14. array_push($items, $row);
  15. }
  16. $result["rows"] = $items;
  17. echo json_encode($result);

9、增加选择框

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

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

Html代码  

  1. <table id="tt" title="Checkbox Select" class="easyui-datagrid" style="width:550px;height:250px"
  2. url="data/datagrid_data.json"
  3. idField="itemid" pagination="true"
  4. iconCls="icon-save">
  5. <thead>
  6. <tr>
  7. <th field="ck" checkbox="true"></th>
  8. <th field="itemid" width="80">Item ID</th>
  9. <th field="productid" width="80">Product ID</th>
  10. <th field="listprice" width="80" align="right">List Price</th>
  11. <th field="unitcost" width="80" align="right">Unit Cost</th>
  12. <th field="attr1" width="100">Attribute</th>
  13. <th field="status" width="60" align="center">Status</th>
  14. </tr>
  15. </thead>
  16. </table>

上面的代码增加了一个含有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 = ‘<a href="#" onclick="saverow(this)">Save</a> ‘;
  81. var c = ‘<a href="#" onclick="cancelrow(this)">Cancel</a>‘;
  82. return s + c;
  83. } else {
  84. var e = ‘<a href="#" onclick="editrow(this)">Edit</a> ‘;
  85. var d = ‘<a href="#" onclick="deleterow(this)">Delete</a>‘;
  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. function updateActions(index) {
  105. $(‘#tt‘).datagrid(‘updateRow‘, {
  106. index: index,
  107. row: {}
  108. });
  109. }

为了让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?‘,
  10. function(r) {
  11. if (r) {
  12. $(‘#tt‘).datagrid(‘deleteRow‘, getRowIndex(target));
  13. }
  14. });
  15. }
  16. function saverow(target) {
  17. $(‘#tt‘).datagrid(‘endEdit‘, getRowIndex(target));
  18. }
  19. function cancelrow(target) {
  20. $(‘#tt‘).datagrid(‘cancelEdit‘, getRowIndex(target));
  21. }

11、扩展编辑器

一些通用编辑器被加入到datagrid中，用来允许用户编辑数据。所有编辑器在 $.fn.datagrid.defaults.editors对象中进行定义，被扩展来支持新编辑器。本教程教你如何增加一个新的numberspinner编辑器到datagrid中。


 
扩展numberspinner编辑器

Js代码  

  1. $.extend($.fn.datagrid.defaults.editors, {
  2. numberspinner: {
  3. init: function(container, options) {
  4. var input = $(‘<input type="text">‘).appendTo(container);
  5. return input.numberspinner(options);
  6. },
  7. destroy: function(target) {
  8. $(target).numberspinner(‘destroy‘);
  9. },
  10. getValue: function(target) {
  11. return $(target).numberspinner(‘getValue‘);
  12. },
  13. setValue: function(target, value) {
  14. $(target).numberspinner(‘setValue‘, value);
  15. },
  16. resize: function(target, width) {
  17. $(target).numberspinner(‘resize‘, width);
  18. }
  19. }
  20. });

在html标识理创建DataGrid

Html代码  

  1. <table id="tt" style="width:600px;height:250px"
  2. url="data/datagrid_data.json" title="Editable DataGrid" iconCls="icon-edit"
  3. singleSelect="true" idField="itemid" fitColumns="true">
  4. <thead>
  5. <tr>
  6. <th field="itemid" width="60">Item ID</th>
  7. <th field="listprice" width="80" align="right" editor="{type:‘numberbox‘,options:{precision:1}}">List Price</th>
  8. <th field="unitcost" width="80" align="right" editor="numberspinner">Unit Cost</th>
  9. <th field="attr1" width="180" editor="text">Attribute</th>
  10. <th field="status" width="60" align="center" editor="{type:‘checkbox‘,options:{on:‘P‘,off:‘‘}}">Status</th>
  11. <th field="action" width="80" align="center" formatter="formatAction">Action</th>
  12. </tr>
  13. </thead>
  14. </table>

指定numberspinner编辑器到“unit cost”字段，当启动编辑行，用户就可以利用numberspinner编辑器组件来编辑数据。

时间： 2024-10-11 05:18:13

jQuery EasyUI教程之datagrid应用的相关文章

jQuery EasyUI教程之datagrid应用（三）

今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能:jQuery EasyUI教程之datagrid应用(二) 接下来就是数据的增删改查了,首先我们在页面中添加功能按钮 这里很简单就是datagrid的toolbar属性 接下来我们实现按键的功能 查询比较麻烦我们最后写,先写添加吧,既然要添加,就应该有表格或是输入的文本框吧,还要进行提交,那就要有f

jQuery EasyUI教程之datagrid应用（二）

上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery EasyUI教程之datagrid应用(一) 这里不难发现生日的格式是毫秒(long型数据),并不是我们想要的年月日的格式,那我们就修改一下 我们在js中写入格式时间的方法,并在生日一列用formatter来调用方法格式时间, //格式化时间 //把long型日期转为想要类型 function getDa

jQuery EasyUI教程之datagrid应用（一）

一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 . 我们会用到如下插件: · datagrid: 列表显示数据. · dialog: 增加或编辑单个用户信息. · form: 用来提交表单数据. · messager: 用来显示操作信息. 第一步:准备数据库 使

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API] 2014-04-02   DataGrid 继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults. DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据. DataGrid控件被设计来减少开发时间和要求开发商没有特定的知识.它是轻量级的和功能丰富的.合并单元格,多列标题,冻结列和页脚是仅有的几个特点. [依赖于] pane

jQuery easyui中获取datagrid某一列的值之和

我想实现的功能就是加载datagrid之和能够计算出某一列的值之和,删除某一行数据的时候会从总数里面减去这列这行的数据,新增一条记录的时候也会把这个数据加在总数上面..说起来不知道能不能被人理解... 求大神帮忙.. 下面是部分代码.. 有些代码已经省略了..  怎么获取“我是那个数”的所有列的值的和呢?? 和删除增加那列数据呢 $(function() {$('#content').datagrid( {toolbar : [ {text : '新增',iconCls : 'icon-add'

jQuery基础教程之is()方法和has() 方法

is()方法 —— 用于筛选 语法: jQueryObject.is( expr )返回值: is()函数的返回值为Boolean类型.true或者false.只要其中至少有一个元素符合给定的表达式就返回true,否则就返回false.说明: is()方法用于判断与当前jQuery对象相匹配的元素是否符合指定的表达式.这里的表达式包括:选择器(字符串).DOM元素(Element).jQuery对象.函数.可以看出来,它是根据选择器.DOM元素或jQuery 对象来检测匹配元素集合. has()

Jquery EasyUI的添加，修改，删除，查询等基本操作介绍

http://www.jb51.net/article/42016.htm 初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例.写了一些基本的增删改查功能,算是对该控件的基本入门.后续有时间继续深入学习. 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1.列表展示 2.新

[jQuery EasyUI系列] 创建增删改查应用

一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: datagrid:向用户展示列表数据 dialog:创建并编辑一条单一的数据 form:用于提交表单数据 messager:显示一些操作信息 二.操作步骤 1.准备数据库并创建实例数据 2.创建DataGrid来显示用户信息 创建没有JavaScript代码的DataGrid 1 <table id=&qu

ASP.NET网站权限设计实现（三）——套用JQuery EasyUI列表显示数据、分页、查询

一.说明: JQuery EasyUI下载地址:http://jquery-easyui.wikidot.com/download,最新版本1.2.2. 首先预览一下界面: 本例实现的功能: 1.多标签 2.分页列表显示数据 3.获取选中行的标识值,删除选中行 实现以上功能主要使用了: 1.layout:布局 2.tabs:多标签 3.datagrid:表格显示数据,并可以分页 4.messager:消息框 5.window:窗口 要了解用法,下载之后,参阅demo文件夹下的demo和官方文档.