jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性.frozenColumn 属性和 columns 属性一样. $('#tt').datagrid({ title:'Frozen Columns', iconCls:'icon-save', width:500, height:250, url:'data/datagrid_data.json',…

jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排序.默认的,列是不能排序的,除非您设置 sortable 属性为 true. 创建数据网格(DataGrid) url="datagrid8_getdata.php" title="Load Data" iconCls="icon-save" row…

jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用datagrid 方法,并传递一个新的 columns 属性. 创建数据网格(DataGrid) url="data/datagrid_data.json" singleSelect="true" iconCls="icon-save"> $('#t…

jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不同的颜色. 数据网格(datagrid)的 rowStyler 函数的设计目的是允许您自定义行样式.以下代码展示如何改变行样式: url="data/datagrid_data.json" singleSelect="true" fitColumns="tru…

jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 formatter 属性,它是一个函数.这个格式化函数包含三个参数: value:当前列对应字段值. row:当前的行记录数据. index:当前的行下标. 创建数据网格(DataGrid) url="data/datagrid_data.json…

jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上添加一些自定义按钮. 创建数据网格(DataGrid) url="data/datagrid_data.json" iconCls="icon-save" pagination="true"> Item ID Product ID List P…

jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们仅仅需要添加一个列的 checkbox 属性,并设置它为 true.代码如下所示: url="data/datagrid_data.json" idField="itemid" pagination="true" iconCls="icon…

jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具可以在数据网格(datagrid)中迅速获取和显示数据.在数据网格(datagrid)的头部,您可以仅仅通过点击列的头部来排序数据.本教程将向您展示如何创建自定义卡片视图(Card View). 创建卡片视图(Card View) 从数据网格(datagrid)的默认视图继承,是个创建自定义视图的不…

jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 true,然后准备定义在数据网格(datagrid)数据中的页脚行.以下是示例数据: {"total":1,"rows":[{"id":1,"name":"Chai","price":18.00…

jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建一个可编辑属性的分层(hierarchical)列表. 设置 HTML url="propertygrid_data.json" showGroup="true" scrollbarSize="0" > 准备 json 数据 [ {"…