雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图
jQuery EasyUI 数据网格 - 创建自定义视图
在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局。对于用户来说,卡片视图(Card View)是个不错的选择。这个工具可以在数据网格(datagrid)中迅速获取和显示数据。在数据网格(datagrid)的头部,您可以仅仅通过点击列的头部来排序数据。本教程将向您展示如何创建自定义卡片视图(Card View)。
创建卡片视图(Card View)
从数据网格(datagrid)的默认视图继承,是个创建自定义视图的不错方法。我们将要创建一个卡片视图(Card View)来为每行显示一些信息。
var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
renderRow: function(target, fields, frozen, rowIndex, rowData){
var cc = [];
cc.push('');
if (!frozen){
var aa = rowData.itemid.split('-');
var img = 'shirt' + aa[1] + '.gif';
cc.push('');
cc.push('
for(var i=0; i<fields.length; p="" i++){<="">
var copts = $(target).datagrid('getColumnOption', fields[i]);
cc.push('
' + copts.title + ': ' + rowData[fields[i]] + '
');
}
cc.push('
');
}
cc.push('');
return cc.join('');
}
});
创建数据网格(DataGrid)
现在我们使用视图创建数据网格(datagrid)。
title="DataGrid - CardView" singleSelect="true" fitColumns="true" remoteSort="false"
url="datagrid8_getdata.php" pagination="true" sortOrder="desc" sortName="itemid">
Item ID | List Price | Unit Cost | Attribute | Status |
---|
$('#tt').datagrid({
view: cardview
});
请注意,我们设置 view 属性,且它的值为我们的卡片视图。
下载 jQuery EasyUI 实例
jeasyui-datagrid-datagrid16.zip
本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)
雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图的更多相关文章
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏
jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合
jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建页脚摘要
jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格
jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建子网格
jQuery EasyUI 数据网格 - 创建子网格 使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息. 任何内容都可以加载作为行详细,子网格也可以动态加载. 本教程将 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列
jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列
jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序
jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...
随机推荐
- SVProgressHUD提示框IOS
SVProgressHUD--比MBProgressHUD更好用的 iOS进度提示组件 项目里用到SVProgressHud,感觉背景颜色太丑,因为很久很久以前改过,就想在这个项目里也改下,但是时间过 ...
- Centos7.1环境下搭建SVN
环境准备: 系统 配置 IP Centos7.1 1核2G+60GB硬盘 10.10.28.204 1.安装 sudo yum install subversion 查看版本 svnserve –-v ...
- javaweb(3)之JSP&EL&JSTL
JSP(Java Server Page) 介绍 什么是 JSP ? 从用户角度看,JSP 就是一个网页. 从开发者角度看,它其实就是一个继承了 Servlet 的 java 类,所以可以直接说 JS ...
- python基础(7)-函数&命名空间&作用域&闭包
函数 动态参数 *args def sum(*args): ''' 任何参数都会被args以元组的方式接收 ''' print(type(args)) # result:<class 'tupl ...
- Spark MLlib之使用Breeze操作矩阵向量
在使用Breeze 库时,需要导入相关包: import breeze.linalg._ import breeze.numerics._ Breeze创建函数 //全0矩阵 DenseMatrix. ...
- [MacOS] Genymotion***下载模拟器方法
其它就不说了,我用的是某个工具. 将以下地址加入到白名单 https://cloud.genymotion.com http://dl.genymotion.com
- [ Python ] KMP Algorithms
def pmt(s): """ :param s: the string to get its partial match table :return: partial ...
- ssh防止暴力破解之fail2ban
1.利用sshd服务本身防止暴力破解 2.sshd服务防止暴力破解和fail2ban使用方法 先说说一般的防范措施: 方法1: 1.密码足够复杂: 密码的长度要大于8位最好大于14位.密码的复杂度是密 ...
- Windbg程序调试系列1-常用命令说明&示例
Windbg程序调试是.Net高级开发需要掌握的必备技能,分析内存泄露.分析高CPU.分析线程阻塞.分析内存对象.分析线程堆栈.Live Dedugging.这个领域可以说一个技能+场景化应用的结合, ...
- PTA第一个编程题总结
7-1 打印沙漏 (20 分) 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数 ...