jquery easyui 里的datagrid editor 如何绑定事件?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery easyui 里的datagrid editor 如何绑定事件?相关的知识,希望对你有一定的参考价值。
editor为text或numberbox我知道,其他比如:combogrid,combobox,datebox, 是怎么绑定的,我试了一下,只有text 能响应事件,方法如下:
editor.target.bind('focus',function()
alert('.....');
)
再次说明,此绑定方法在editor为text时响应的,但datebox,combogrid 等不能响应。。
type: 'combobox',
options:
valueField: 'Key',
textField: 'Key',
url: '/Sys/SearchCodeInFunctionModel',
handler:function()
alert('something');
不知道到这种方式是不是可以。本回答被提问者和网友采纳 参考技术B 假的绑定可以的
field:'name',title:'name',width:70,align:'center',editor:type:'text',
formatter:function(value,row,index)
var s = '<a href="javascript:void(0)" onclick="abc()">'+value+'</a>';
return s;
这样的一个假的单击事件! 参考技术C 仔细看下api,datagrid的编辑器的控件都继承于父控件,事件响应是有限制的追问
API里没有editor事件的相关说明 。Tutorial 有个两列计算的例子,那个editor是numberbox ,网上有许多关于自定义事件的文章 ,但也都是 text numberbox
追答我虽然没有一个个都试过,但是datebox绝对是可以的,本来想看下官网找点demo的,但是不知道为啥官网打不开了,那你只能自己研究了
追问下边是为datagrid 增加了dblClickCell代码,测试后,还是只有 text 有响应。方便加我QQ807222175
onDblClickCell:function(index,field,value)
$(this).datagrid('beginEdit', index);
var ed = $(this).datagrid('getEditor', index:index,field:field);
$(ed.target).focus();
$(ed.target).select();
jQuery EasyUI教程之datagrid应用
一、利用jQuery EasyUI的DataGrid创建CRUD应用
对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。
我们会用到如下插件:
· datagrid: 列表显示数据。
· dialog: 增加或编辑单个用户信息。
· form: 用来提交表单数据。
· messager: 用来显示操作信息。
第一步:准备数据库
使用MySql数据库来保存用户信息,并创建数据库和“users”表。
第二步:创建DataGrid数据表格来显示用户信息
不需要编写任何javascript代码创建DataGrid数据表格。
- <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
- url="get_users.php"
- toolbar="#toolbar"
- rownumbers="true" fitColumns="true" singleSelect="true">
- <thead>
- <tr>
- <th field="firstname" width="50">First Name</th>
- <th field="lastname" width="50">Last Name</th>
- <th field="phone" width="50">Phone</th>
- <th field="email" width="50">Email</th>
- </tr>
- </thead>
- </table>
- <div id="toolbar">
- <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
- </div>
如下图所示,我们不需要写任何一行javascript代码:
DataGrid使用“url”属性来指定“get_users.php”,用来从服务器端接收数据。
get_users.php代码文件:
- $rs = mysql_query(‘select * from users‘);
- $result = array();
- while($row = mysql_fetch_object($rs)){
- array_push($result, $row);
- }
- echo json_encode($result);
第三步:创建表单对话框
增加或者编辑用户信息,我们使用同一对话框。
- <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
- <div class="ftitle">User Information</div>
- <form id="fm" method="post">
- <div class="fitem">
- <label>First Name:</label>
- <input name="firstname" class="easyui-validatebox" required="true">
- </div>
- <div class="fitem">
- <label>Last Name:</label>
- <input name="lastname" class="easyui-validatebox" required="true">
- </div>
- <div class="fitem">
- <label>Phone:</label>
- <input name="phone">
- </div>
- <div class="fitem">
- <label>Email:</label>
- <input name="email" class="easyui-validatebox" validType="email">
- </div>
- </form>
- </div>
- <div id="dlg-buttons">
- <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$(‘#dlg‘).dialog(‘close‘)">Cancel</a>
- </div>
对话框的创建也不需要编写javascript代码。
第四步:实现增加和编辑用户功能
增加用户信息时,打开对话框,清除表单数据。
- function newUser(){
- $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘,‘New User‘);
- $(‘#fm‘).form(‘clear‘);
- url = ‘save_user.php‘;
- }
编辑用户信息时,打开对话框,将选择的数据表格行数据装入表单。
- var row = $(‘#dg‘).datagrid(‘getSelected‘);
- if (row){
- $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘,‘Edit User‘);
- $(‘#fm‘).form(‘load‘,row);
- url = ‘update_user.php?id=‘+row.id;
- }
“url”保存URL地址,当保存用户数据时,表单用它来提交(post)数据到服务器。
第五步:保存用户数据
使用如下代码来保存用户数据:
- function saveUser(){
- $(‘#fm‘).form(‘submit‘,{
- url: url,
- onSubmit: function(){
- return $(this).form(‘validate‘);
- },
- success: function(result){
- var result = eval(‘(‘+result+‘)‘);
- if (result.errorMsg){
- $.messager.show({
- title: ‘Error‘,
- msg: result.errorMsg
- });
- } else {
- $(‘#dlg‘).dialog(‘close‘); // close the dialog
- $(‘#dg‘).datagrid(‘reload‘); // reload the user data
- }
- }
- });
- }
提交表单前,“onSubmit”函数被调用,此时可校验表单字段值。当表单字段值提交成功,关闭对话框和刷新数据表格数据。
第六步:删除用户
用如下代码来删除用户:
- function destroyUser(){
- var row = $(‘#dg‘).datagrid(‘getSelected‘);
- if (row){
- $.messager.confirm(‘Confirm‘,‘Are you sure you want to destroy this user?‘,function(r){
- if (r){
- $.post(‘destroy_user.php‘,{id:row.id},function(result){
- if (result.success){
- $(‘#dg‘).datagrid(‘reload‘); // 刷新用户数据
- } else {
- $.messager.show({ // 显示错误信息
- title: ‘Error‘,
- msg: result.errorMsg
- });
- }
- },‘json‘);
- }
- });
- }
- }
删除一行数据时,会弹出一个confirm对话框来让我们选择确定是否真的删除数据行。当删除数据成功,调用“reload”方法刷新datagrid数据。
二、DataGrid的扩展应用
上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息。本教程将教你如何创建一个CRUD 数据表格(datagrid). 为了让这些CRUD功能正常工作,我们会用到edatagrid.js插件。
第一步:在HTML标识里定义DataGrid
- <table id="dg" title="My Users" style="width:550px;height:250px"
- toolbar="#toolbar" idField="id"
- rownumbers="true" fitColumns="true" singleSelect="true">
- <thead>
- <tr>
- <th field="firstname" width="50" editor="{type:‘validatebox‘,options:{required:true}}">First Name</th>
- <th field="lastname" width="50" editor="{type:‘validatebox‘,options:{required:true}}">Last Name</th>
- <th field="phone" width="50" editor="text">Phone</th>
- <th field="email" width="50" editor="{type:‘validatebox‘,options:{validType:‘email‘}}">Email</th>
- </tr>
- </thead>
- </table>
- <div id="toolbar">
- <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘addRow‘)">New</a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘destroyRow‘)">Destroy</a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘saveRow‘)">Save</a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘cancelRow‘)">Cancel</a>
- </div>
第二步:使DataGrid可编辑
- $(‘#dg‘).edatagrid({
- url: ‘get_users.php‘,
- saveUrl: ‘save_user.php‘,
- updateUrl: ‘update_user.php‘,
- destroyUrl: ‘destroy_user.php‘
- });
为可编辑的datagrid提供了“url”、“saveUrl”、“updateUrl”、“destroyUrl”属性:
url: 从服务器端接收用户数据。
saveUrl: 保存新用户数据。
updateUrl: 更新现有用户数据。
destroyUrl: 删除现有用户数据。
第三步:编写服务器端处理代码
保存新用户(save_user.php):
- $firstname = $_REQUEST[‘firstname‘];
- $lastname = $_REQUEST[‘lastname‘];
- $phone = $_REQUEST[‘phone‘];
- $email = $_REQUEST[‘email‘];
- include ‘conn.php‘;
- $sql = "insert into users(firstname,lastname,phone,email) values(‘$firstname‘,‘$lastname‘,‘$phone‘,‘$email‘)";
- @mysql_query($sql);
- echo json_encode(array(
- ‘id‘ => mysql_insert_id(),
- ‘firstname‘ => $firstname,
- ‘lastname‘ => $lastname,
- ‘phone‘ => $phone,
- ‘email‘ => $email
- ));
更新现有用户(update_user.php):
- $id = intval($_REQUEST[‘id‘]);
- $firstname = $_REQUEST[‘firstname‘];
- $lastname = $_REQUEST[‘lastname‘];
- $phone = $_REQUEST[‘phone‘];
- $email = $_REQUEST[‘email‘];
- include ‘conn.php‘;
- $sql="update users set firstname=‘$firstname‘,lastname=‘$lastname‘,phone=‘$phone‘,email=‘$email‘ where id=$id";
- @mysql_query($sql);
- echo json_encode(array(
- ‘id‘ => $id,
- ‘firstname‘ => $firstname,
- ‘lastname‘ => $lastname,
- ‘phone‘ => $phone,
- ‘email‘ => $email
- ));
删除现有用户(destroy_user.php):
- $id = intval($_REQUEST[‘id‘]);
- include ‘conn.php‘;
- $sql = "delete from users where id=$id";
- @mysql_query($sql);
- echo json_encode(array(‘success‘=>true));
edatagrid属性
edatagrid的属性从datagrid属性中扩展,下面为edatagrid增加的属性:
属性名 |
类型 |
描述 |
默认值 |
destroyMsg |
object |
The confirm dialog message to display while destroying a row. |
destroyMsg:{ norecord:{ // when no record is selected title:‘Warning‘, msg:‘No record is selected.‘ }, confirm:{ // when select a row title:‘Confirm‘, msg:‘Are you sure you want to delete?‘ } }
|
autoSave |
boolean |
True to auto save the editing row when click out of datagrid. |
false |
url |
string |
A URL to retrieve data from server. |
null |
saveUrl |
string |
A URL to save data to server and return the added row. |
null |
updateUrl |
string |
A URL to update data to server and return the updated row. |
null |
destroyUrl |
string |
A URL to post ‘id‘ parameter to server to destroy that row. |
null |
tree |
selector |
The tree selector to show the corresponding tree component. |
null |
treeUrl |
string |
A URL to retrieve the tree data. |
null |
treeDndUrl |
string |
A URL to process the drag and drop operation. |
null |
treeTextField |
string |
Defines the tree text field name. |
name |
treeParentField |
string |
Defines the tree parent node field name. |
parentId |
edatagrid事件
从datagrid扩展,下面为edatagrid增加的事件:
事件名 |
参数 |
描述 |
onAdd |
index,row |
Fires when a new row is added. |
onEdit |
index,row |
Fires when a row is editing. |
onBeforeSave |
index |
Fires before a row to be saved, return false to cancel this save action. |
onSave |
index,row |
Fires when a row is saved. |
onDestroy |
index,row |
Fires when a row is destroy. |
onError |
index,row |
Fires when the server errors occur. The server should return a row with ‘isError‘ property set to true to indicate some errors occur. Code examples: //server side code echo json_encode(array( ‘isError‘ => true, ‘msg‘ => ‘error message.‘ ));
//client side code $(‘#dg‘).edatagrid({ onError: function(index,row){ alert(row.msg); } });
|
edatagrid方法
从datagrid中扩展,下面是为edatagrid增加或重写的方法:
方法名 |
参数 |
描述 |
options |
none |
Return the options object. |
enableEditing |
none |
Enable the datagrid editing. |
disableEditing |
none |
Disable the datagrid editing. |
editRow |
index |
Edit the specified row. |
addRow |
index |
Add a new row to the specified row index. If the index parameter is not specified, append the new row to the last position. Code examples: // append an empty row $(‘#dg‘).edatagrid(‘addRow‘);
// append an empty row as first row $(‘#dg‘).edatagrid(‘addRow‘,0);
// insert a row with default values $(‘#dg‘).edatagrid(‘addRow‘,{ index: 2, row:{ name:‘name1‘, addr:‘addr1‘ } });
|
saveRow |
none |
Save the editing row that will be posted to server. |
cancelRow |
none |
Cancel the editing row. |
destroyRow |
index |
Destroy the current selected row. If the index parameter is not specified, destroy all the selected rows. Code examples: // destroy all the selected rows $(‘#dg‘).edatagrid(‘destroyRow‘);
// destroy the first row $(‘#dg‘).edatagrid(‘destroyRow‘, 0);
// destroy the specified rows $(‘#dg‘).edatagrid(‘destroyRow‘, [3,4,5]); |
三、设定或定制各种功能
1、增加分页
创建DataGrid数据表格
设置“url”属性,用来装入远端服务器数据,服务器返回JSON格式数据。
- <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
- url="datagrid2_getdata.php"
- title="Load Data" iconCls="icon-save"
- rownumbers="true" pagination="true">
- <thead>
- <tr>
- <th field="itemid" width="80">Item ID</th>
- <th field="productid" width="80">Product ID</th>
- <th field="listprice" width="80" align="right">List Price</th>
- <th field="unitcost" width="80" align="right">Unit Cost</th>
- <th field="attr1" width="150">Attribute</th>
- <th field="status" width="60" align="center">Stauts</th>
- </tr>
- </thead>
- </table>
定义datagrid列,将“pagination”属性设为true,将会在datagrid底部生成一个分页工具条。 pagination会发送两个参数给服务器:
1、page: 页码,从1开始。
2、rows: 每页显示行数。
服务器端代码
- $page = isset($_POST[‘page‘]) ? intval($_POST[‘page‘]) : 1;
- $rows = isset($_POST[‘rows‘]) ? intval($_POST[‘rows‘]) : 10;
- // ...
- $rs = mysql_query("select count(*) from item");
- $row = mysql_fetch_row($rs);
- $result["total"] = $row[0];
- $rs = mysql_query("select * from item limit $offset,$rows");
- $items = array();
- while($row = mysql_fetch_object($rs)){
- array_push($items, $row);
- }
- $result["rows"] = $items;
- echo json_encode($result);
2、增加搜索
创建DataGrid
创建一个有分页特性的datagrid,然后增加一个搜索工具条。
- <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
- url="datagrid24_getdata.php" toolbar="#tb"
- title="Load Data" iconCls="icon-save"
- rownumbers="true" pagination="true">
- <thead>
- <tr>
- <th field="itemid" width="80">Item ID</th>
- <th field="productid" width="80">Product ID</th>
- <th field="listprice" width="80" align="right">List Price</th>
- <th field="unitcost" width="80" align="right">Unit Cost</th>
- <th field="attr1" width="150">Attribute</th>
- <th field="status" width="60" align="center">Stauts</th>
- </tr>
- </thead>
- </table>
工具条定义为:
- <div id="tb" style="padding:3px">
- <span>Item ID:</span>
- <input id="itemid" style="line-height:26px;border:1px solid #ccc">
- <span>Product ID:</span>
- <input id="productid" style="line-height:26px;border:1px solid #ccc">
- <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
- </div>
用户输入搜索值,然后点击搜索按钮,“doSearch”函数将会被调用:
- function doSearch() {
- $(‘#tt‘).datagrid(‘load‘, {
- itemid: $(‘#itemid‘).val(),
- productid: $(‘#productid‘).val()
- });
- }
上面的代码调用“load”方法来装载新的datagrid数据,同时需要传递“itemid”和“productid”参数到服务器。
服务器端代码
- include ‘conn.php‘;
- $page = isset($_POST[‘page‘]) ? intval($_POST[‘page‘]) : 1;
- $rows = isset($_POST[‘rows‘]) ? intval($_POST[‘rows‘]) : 10;
- $itemid = isset($_POST[‘itemid‘]) ? mysql_real_escape_string($_POST[‘itemid‘]) : ‘‘;
- $productid = isset($_POST[‘productid‘]) ? mysql_real_escape_string($_POST[‘productid‘]) : ‘‘;
- $offset = ($page-1)*$rows;
- $result = array();
- $where = "itemid like ‘$itemid%‘ and productid like ‘$productid%‘";
- $rs = mysql_query("select count(*) from item where " . $where);
- $row = mysql_fetch_row($rs);
- $result["total"] = $row[0];
- $rs = mysql_query("select * from item where " . $where . " limit $offset,$rows");
- $items = array();
- while($row = mysql_fetch_object($rs)){
- array_push($items, $row);
- }
- $result["rows"] = $items;
- echo json_encode($result);
3、获取选择行数据
本示例教你如何获取选择行数据。
Datagrid组件含有两个方法用来接收选择行数据:
- getSelected: 获取所选择行的第一行数据,如果没有行被选择返回null,否则返回数据记录。
- getSelections: 获取所有选择行数据,返回数组数据,里面的数组元素就是数据记录。
创建DataGrid
- <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
- url="data/datagrid_data.json"
- title="Load Data" iconCls="icon-save">
- <thead>
- <tr>
- <th field="itemid" width="80">Item ID</th>
- <th field="productid" width="80">Product ID</th>
- <th field="listprice" width="80" align="right">List Price</th>
- <th field="unitcost" width="80" align="right">Unit Cost</th>
- <th field="attr1" width="150">Attribute</th>
- <th field="status" width="60" align="center">Stauts</th>
- </tr>
- </thead>
- </table>
实例用法
获取单行数据:
- var row = $(‘#tt‘).datagrid(‘getSelected‘);
- if (row){
- alert(‘Item ID:‘+row.itemid+"\nPrice:"+row.listprice);
- }
获取所有行itemid:
- var ids = [];
- var rows = $(‘#tt‘).datagrid(‘getSelections‘);
- for(var i=0; i<rows.length; i++){
- ids.push(rows[i].itemid);
- }
- alert(ids.join(‘\n‘));
4、增加工具条
本示例教你如何增加一个工具条到datagrid中。
创建DataGrid
- <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
- url="data/datagrid_data.json"
- title="DataGrid with Toolbar" iconCls="icon-save"
- toolbar="#tb">
- <thead>
- <tr>
- <th field="itemid" width="80">Item ID</th>
- <th field="productid" width="80">Product ID</th>
- <th field="listprice" width="80" align="right">List Price</th>
- <th field="unitcost" width="80" align="right">Unit Cost</th>
- <th field="attr1" width="150">Attribute</th>
- <th field="status" width="60" align="center">Stauts</th>
- </tr>
- </thead>
- </table>
- <div id="tb">
- <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert(‘Add‘)">Add</a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert(‘Cut‘)">Cut</a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert(‘Save‘)">Save</a>
- </div>
5、复杂工具条
datagrid的工具条不仅仅只是包含按钮,还可以是其它的组件。为方便布局,你可以通过现有的构成datagrid工具条的DIV来定义工具条。本教程教你如何创建一个复杂的工具条,作为datagrid的组件。
创建Toolbar
- <div id="tb" style="padding:5px;height:auto">
- <div style="margin-bottom:5px">
- <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
- <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
- </div>
- <div>
- Date From: <input class="easyui-datebox" style="width:80px">
- To: <input class="easyui-datebox" style="width:80px">
- Language:
- <input class="easyui-combobox" style="width:100px"
- url="data/combobox_data.json"
- valueField="id" textField="text">
- <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
- </div>
- </div>
创建DataGrid
- <table class="easyui-datagrid" style="width:600px;height:250px"
- url="data/datagrid_data.json"
- title="DataGrid - Complex Toolbar" toolbar="#tb"
- singleSelect="true" fitColumns="true">
- <thead>
- <tr>
- <th field="itemid" width="60">Item ID</th>
- <th field="productid" width="80">Product ID</th>
- <th field="listprice" align="right" width="70">List Price</th>
- <th field="unitcost" align="right" width="70">Unit Cost</th>
- <th field="attr1" width="200">Address</th>
- <th field="status" width="50">Status</th>
- </tr>
- </thead>
- </table>
6、冻结列
本示例演示如何冻结数据列,当用户水平滚动数据表格时,冻结的数据列不会滚动出视图界面外。
通过定义frozenColumns属性来冻结列,冻结列属性的定义同列属性。
- $(‘#tt‘).datagrid({
- title: ‘Frozen Columns‘,
- iconCls: ‘icon-save‘,
- width: 500,
- height: 250,
- url: ‘data/datagrid_data.json‘,
- frozenColumns: [[{
- field: ‘itemid‘,
- title: ‘Item ID‘,
- width: 80
- },
- {
- field: ‘productid‘,
- title: ‘Product ID‘,
- width: 80
- },
- ]],
- columns: [[{
- field: ‘listprice‘,
- title: ‘List Price‘,
- width: 80,
- align: ‘right‘
- },
- {
- field: ‘unitcost‘,
- title: ‘Unit Cost‘,
- width: 80,
- align: ‘right‘
- },
- {
- field: ‘attr1‘,
- title: ‘Attribute‘,
- width: 100
- },
- {
- field: ‘status‘,
- title: ‘Status‘,
- width: 60
- }]]
- });
创建冻结列的datagrid可以不用编写任何javascript代码,如下面这样:
- <table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:500px;height:250px"
- url="data/datagrid_data.json"
- singleSelect="true" iconCls="icon-save">
- <thead frozen="true">
- <tr>
- <th field="itemid" width="80">Item ID</th>
- <th field="productid" width="80">Product ID</th>
- </tr>
- </thead>
- <thead>
- <tr>
- <th field="listprice" width="80" align="right">List Price</th>
- <th field="unitcost" width="80" align="right">Unit Cost</th>
- <th field="attr1" width="150">Attribute</th>
- <th field="status" width="60" align="center">Stauts</th>
- </tr>
- </thead>
- </table>
7、格式化数据列
下面为EasyUI DataGrid里的格式化列示例,用一个定制的列格式化器(formatter)来将文本标注为红色,如果价格低于20的话。
为格式化一个DataGrid列,我们需要设置格式化属性,它是一个函数。格式化函数含有三个参数:
- value: 当前绑定的列字段值。
- row: 当前行记录数据。
- index: 当前行索引。
创建DataGrid
- <table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"
- url="data/datagrid_data.json"
- singleSelect="true" iconCls="icon-save">
- <thead>
- <tr>
- <th field="itemid" width="80">Item ID</th>
- <th field="productid" width="80">Product ID</th>
- <th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th>
- <th field="unitcost" width="80" align="right">Unit Cost</th>
- <th field="attr1" width="100">Attribute</th>
- <th field="status" width="60" align="center">Stauts</th>
- </tr>
- </thead>
- </table>
注意:“listprice”字段有一个“formatter”属性,用来指明格式化函数。
编写格式化函数
- function formatPrice(val,row){
- if (val < 20){
- return ‘<span style="color:red;">(‘+val+‘)</span>‘;
- } else {
- return val;
- }
- }
8、增加排序功能
本示例演示如何通过点击列表头来排序DataGrid数据。
DataGrid中的全部列都可以排序,可以定义哪一个列进行排序。默认列属性不会进行排序,除非列的排序属性sortable设置为true。
创建DataGrid
- <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
- url="datagrid8_getdata.php"
- title="Load Data" iconCls="icon-save"
- rownumbers="true" pagination="true">
- <thead>
- <tr>
- <th field="itemid" width="80" sortable="true">Item ID</th>
- <th field="productid" width="80" sortable="true">Product ID</th>
- <th field="listprice" width="80" align="right" sortable="true">List Price</th>
- <th field="unitcost" width="80" align="right" sortable="true">Unit Cost</th>
- <th field="attr1" width="150">Attribute</th>
- <th field="status" width="60" align="center">Stauts</th>
- </tr>
- </thead>
- </table>
定义了可排序的列为:itemid、productid、listprice、unitcost等。“attr1”列和“status”列不能排序。
DataGrid的排序会发送两个参数给服务器:
- sort: 排序列字段名。
- order: 排序方式,可以是“asc(升序)”或“desc(降序)”,默认为“asc”。
服务器端代码
- $page = isset($_POST[‘page‘]) ? intval($_POST[‘page‘]) : 1;
- $rows = isset($_POST[‘rows‘]) ? intval($_POST[‘rows‘]) : 10;
- $sort = isset($_POST[‘sort‘]) ? strval($_POST[‘sort‘]) : ‘itemid‘;
- $order = isset($_POST[‘order‘]) ? strval($_POST[‘order‘]) : ‘asc‘;
- $offset = ($page-1)*$rows;
- $result = array();
- include ‘conn.php‘;
- $rs = mysql_query("select count(*) from item");
- $row = mysql_fetch_row($rs);
- $result["total"] = $row[0];
- $rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");
- $items = array();
- while($row = mysql_fetch_object($rs)){
- array_push($items, $row);
- }
- $result["rows"] = $items;
- echo json_encode($result);
9、增加选择框
本教程教你如何放置一个checkbox 列到 DataGrid中。利用选择框用户可以即刻选择/取消所有表格数据行。
为增加一个checkbox列,我们只需简单将checkbox属性设置为true即可。代码如下所示:
- <table id="tt" title="Checkbox Select" class="easyui-datagrid" style="width:550px;height:250px"
- url="data/datagrid_data.json"
- idField="itemid" pagination="true"
- iconCls="icon-save">
- <thead>
- <tr>
- <th field="ck" checkbox="true"></th>
- <th field="itemid" width="80">Item ID</th>
- <th field="productid" width="80">Product ID</th>
- <th field="listprice" width="80" align="right">List Price</th>
- <th field="unitcost" width="80" align="right">Unit Cost</th>
- <th field="attr1" width="100">Attribute</th>
- <th field="status" width="60" align="center">Status</th>
- </tr>
- </thead>
- </table>
上面的代码增加了一个含有checkbox属性的列,从而生成了一个选择框列。如果idField属性被设置,DataGrid的已选行在不同的页面里都可以维持。
10、增强行内编辑
Datagrid最近增加了一个可编辑功能,它使用户可增加新行到datagrid中,用户也可对单行或多行数据进行更新。
本教程教你如何创建一个带有行编辑功能的datagrid。
创建DataGrid
- $(function() {
- $(‘#tt‘).datagrid({
- title: ‘Editable DataGrid‘,
- iconCls: ‘icon-edit‘,
- width: 660,
- height: 250,
- singleSelect: true,
- idField: ‘itemid‘,
- url: ‘datagrid_data.json‘,
- columns: [[{
- field: ‘itemid‘,
- title: ‘Item ID‘,
- width: 60
- },
- {
- field: ‘productid‘,
- title: ‘Product‘,
- width: 100,
- formatter: function(value) {
- for (var i = 0; i < products.length; i++) {
- if (products[i].productid == value) return products[i].name;
- }
- return value;
- },
- editor: {
- type: ‘combobox‘,
- options: {
- valueField: ‘productid‘,
- textField: ‘name‘,
- data: products,
- required: true
- }
- }
- },
- {
- field: ‘listprice‘,
- title: ‘List Price‘,
- width: 80,
- align: ‘right‘,
- editor: {
- type: ‘numberbox‘,
- options: {
- precision: 1
- }
- }
- },
- {
- field: ‘unitcost‘,
- title: ‘Unit Cost‘,
- width: 80,
- align: ‘right‘,
- editor: ‘numberbox‘
- },
- {
- field: ‘attr1‘,
- title: ‘Attribute‘,
- width: 150,
- editor: ‘text‘
- },
- {
- field: ‘status‘,
- title: ‘Status‘,
- width: 50,
- align: ‘center‘,
- editor: {
- type: ‘checkbox‘,
- options: {
- on: ‘P‘,
- off: ‘‘
- }
- }
- },
- {
- field: ‘action‘,
- title: ‘Action‘,
- width: 70,
- align: ‘center‘,
- formatter: function(value, row, index) {
- if (row.editing) {
- var s = ‘<a href="#" onclick="saverow(this)">Save</a> ‘;
- var c = ‘<a href="#" onclick="cancelrow(this)">Cancel</a>‘;
- return s + c;
- } else {
- var e = ‘<a href="#" onclick="editrow(this)">Edit</a> ‘;
- var d = ‘<a href="#" onclick="deleterow(this)">Delete</a>‘;
- return e + d;
- }
- }
- }]],
- onBeforeEdit: function(index, row) {
- row.editing = true;
- updateActions(index);
- },
- onAfterEdit: function(index, row) {
- row.editing = false;
- updateActions(index);
- },
- onCancelEdit: function(index, row) {
- row.editing = false;
- updateActions(index);
- }
- });
- });
- function updateActions(index) {
- $(‘#tt‘).datagrid(‘updateRow‘, {
- index: index,
- row: {}
- });
- }
为了让datagrid可编辑数据,要增加一个editor属性到列属性里,编辑器会告诉datagrid如何编辑字段和如何保存字段值,这里定义了三个editor:text、combobox和checkbox。
- function getRowIndex(target) {
- var tr = $(target).closest(‘tr.datagrid-row‘);
- return parseInt(tr.attr(‘datagrid-row-index‘));
- }
- function editrow(target) {
- $(‘#tt‘).datagrid(‘beginEdit‘, getRowIndex(target));
- }
- function deleterow(target) {
- $.messager.confirm(‘Confirm‘, ‘Are you sure?‘,
- function(r) {
- if (r) {
- $(‘#tt‘).datagrid(‘deleteRow‘, getRowIndex(target));
- }
- });
- }
- function saverow(target) {
- $(‘#tt‘).datagrid(‘endEdit‘, getRowIndex(target));
- }
- function cancelrow(target) {
- $(‘#tt‘).datagrid(‘cancelEdit‘, getRowIndex(target));
- }
11、扩展编辑器
一些通用编辑器被加入到datagrid中,用来允许用户编辑数据。所有编辑器在 $.fn.datagrid.defaults.editors对象中进行定义,被扩展来支持新编辑器。本教程教你如何增加一个新的numberspinner编辑器到datagrid中。
扩展numberspinner编辑器
- $.extend($.fn.datagrid.defaults.editors, {
- numberspinner: {
- init: function(container, options) {
- var input = $(‘<input type="text">‘).appendTo(container);
- return input.numberspinner(options);
- },
- destroy: function(target) {
- $(target).numberspinner(‘destroy‘);
- },
- getValue: function(target) {
- return $(target).numberspinner(‘getValue‘);
- },
- setValue: function(target, value) {
- $(target).numberspinner(‘setValue‘, value);
- },
- resize: function(target, width) {
- $(target).numberspinner(‘resize‘, width);
- }
- }
- });
在html标识理创建DataGrid
- <table id="tt" style="width:600px;height:250px"
- url="data/datagrid_data.json" title="Editable DataGrid" iconCls="icon-edit"
- singleSelect="true" idField="itemid" fitColumns="true">
- <thead>
- <tr>
- <th field="itemid" width="60">Item ID</th>
- <th field="listprice" width="80" align="right" editor="{type:‘numberbox‘,options:{precision:1}}">List Price</th>
- <th field="unitcost" width="80" align="right" editor="numberspinner">Unit Cost</th>
- <th field="attr1" width="180" editor="text">Attribute</th>
- <th field="status" width="60" align="center" editor="{type:‘checkbox‘,options:{on:‘P‘,off:‘‘}}">Status</th>
- <th field="action" width="80" align="center" formatter="formatAction">Action</th>
- </tr>
- </thead>
- </table>
指定numberspinner编辑器到“unit cost”字段,当启动编辑行,用户就可以利用numberspinner编辑器组件来编辑数据。
以上是关于jquery easyui 里的datagrid editor 如何绑定事件?的主要内容,如果未能解决你的问题,请参考以下文章
JQuery EasyUI Datagrid获取不到后台传递过来的数据,为啥?在线求答!
Jquery easyui 的 datagrid中 ,如何在一列中显示多个字段值?请问你当时是怎么解决的?