欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery EasyUI教程之datagrid应用(三)

程序员文章站 2022-03-30 18:52:40
...

jQuery EasyUI教程之datagrid应用(三)

 

三、设定或定制各种功能

 

1、增加分页


jQuery EasyUI教程之datagrid应用(三)
 

创建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、增加搜索

 


jQuery EasyUI教程之datagrid应用(三)
 

创建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、获取选择行数据

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


jQuery EasyUI教程之datagrid应用(三)
 

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

jQuery EasyUI教程之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的组件。

jQuery EasyUI教程之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、冻结列

本示例演示如何冻结数据列,当用户水平滚动数据表格时,冻结的数据列不会滚动出视图界面外。
 
jQuery EasyUI教程之datagrid应用(三)
 
通过定义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的话。
 
jQuery EasyUI教程之datagrid应用(三)
 
为格式化一个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数据。
 
jQuery EasyUI教程之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中。利用选择框用户可以即刻选择/取消所有表格数据行。
 
jQuery EasyUI教程之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。

jQuery EasyUI教程之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中。

jQuery EasyUI教程之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编辑器组件来编辑数据。

 

 

相关标签: EasyUI