DataTables VS EasyUI DataGrid 基础应用 转
DataTables中文网推出了 第一篇 关于DataTables和其他表格插件比较后,为了把让这个比较更有意义,更能帮助到大家,DataTables中文网 做了问卷调查,根据小伙伴们的填写我归纳了一下,一个表格插件关注点在以下三个部分基础、高级的和进阶:
- 基础
- 排序
- 分页
- 搜索
- 美观
- 合理的配置
- 高级
- 单击和双击行事
- 选择高亮显示
- 增删改查
- 列宽拖动
- 数据导出
- 添加序号
- 进阶
- 支持的数据类型
- 行内编辑
- 合并单元格
- 自定义表头
- 高扩展性
- 易用的API
- 模块化
所以根据以上列出的这些功能点,DataTables中文网至少还会推出三篇文章来讲DataTables和DataGrid之间的“优劣”, 从而帮助大家选出适合自己的表格插件。
由于我也是初次使用DataGrid,所以在某些方面可能还不能描述的很好, 如发现文章有说得不对或者可以改进的地方,希望您还能在阅读完文章后在下方或者通过右下角的反馈发表下自己的看法。 如果觉得本系列文章能帮助到小伙伴们, 希望小伙伴能多多支持本站,多给DataTables中文网提建议,多宣传DataTables中文网。
说之前插播一个广告
好了,我们进入正题吧。
前面一篇讲到了分别使用最简配置,使表格变得更强大,今天我们要讲的就是基础部分, 对照API,Demo分别实现排序,分页,搜索,这三个基本功能。
DataTables实现排序,分页,搜索
对于DataTables,其实之前的例子中已经做完了这个步骤,因为默认就开启了这部分功能,还是直接看代码吧
和之前一样,有如下表格:
1 |
<table> |
第一步:引入 DataTables 的js和css
1 |
<!--样式文件--> |
第二步:给表格加上id
1 |
<table id="example" class="display"> |
第三步:初始化
1 |
<script> |
只需简单的一行代码,DataTables就会帮你把表格配备上排序,翻页,快速过滤。这次的代码比之前的要多了列配置,本次先卖个关子, 后面再告诉大家为什么要这样配置?
Code | Name | Price |
---|---|---|
001 | name1 | 2323 |
002 | name2 | 4612 |
003 | name3 | 4612 |
004 | name4 | 4612 |
005 | name5 | 4612 |
006 | name6 | 4612 |
007 | name7 | 4612 |
008 | name8 | 4612 |
009 | name9 | 4612 |
010 | name10 | 4612 |
DataGrid实现排序,分页,搜索
不多说,还是来看看DataGrid是怎么实现的。在做DataGrid的时候我花了些时间,用起来不那么熟练,遇到了许多问题,不过通过在网上搜索 最终解决了问题,只是翻页还是有点小bug,需要点击下排序之后,翻页才正常,如果小伙伴你知道怎么解决希望您能告诉我
第一步:引入 EasyUI DataGrid 的js和css
1 |
<!--核心样式文件--> |
第二步:使用js代码初始化DataGrid
1 |
var dg = $('#dataGrid').datagrid({ |
效果如下:
first_name
|
last_name
|
phone
|
001
|
name1
|
2323
|
002
|
name2
|
4612
|
003
|
name3
|
4613
|
004
|
name4
|
4614
|
005
|
name5
|
4615
|
006
|
name6
|
4612
|
007
|
name7
|
4712
|
008
|
name8
|
4812
|
009
|
name9
|
4912
|
010
|
name10
|
5012
|
011
|
name11
|
5112
|
012
|
name12
|
34235
|
Page | of 2 |
讨论
可能我是初接触DataGrid,所以在做这个例子的时候显的有些费力,虽然不是难的功能,作为初学者我觉得DataGrid还是比较难入手。 但回过头来想想,我最开始使用DataTables的时候不也是这样费力么?开玩笑了,大家不要当真。
说说我对这篇文章的感谢,总的来说两款表格插件表现都不错,功能都能实现,只要对着文档,还是能够做出来。同时也分享下一个经验, 我觉得实用于所有的插件:
- 首先,学习或者说使用一个插件首先去查看Demo,我的做法是把作者提供的所有Demo浏览一遍,知道这个插件他能做什么
- 其次,根据自己的情况,结合Demo做出属于自己的示例
- 再次,查阅API文档,弄清楚各个参数的含义及用法
- 最后,应用到项目中去
参考:
DataTables VS EasyUI DataGrid 基础应用 转的更多相关文章
- easyui datagrid 基础方法和事件
数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数据表格列配置对象,查看列属性以获取更多细节 ...
- easyUI datagrid笔记
easyUI datagrid 简单使用与注意细节 背景: 业余爱好,使用了一下easyUI的搜索框与数据表格,并把两者整合起来进行使用. 使用前提(引入需要的js and css): <lin ...
- EasyUI DataGrid 实现单行/多行编辑功能
要实现 EasyUI DataGrid 的可编辑很简单,在需要编辑的列添加 editor [编辑器]就可以了. 单行编辑 // 初始化数据列表 function initDatagrid() { $( ...
- JQuery EasyUI DataGrid动态合并(标题)单元) 一
JS: /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&q ...
- easyui datagrid可编辑表格使用经验分享
文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...
- jQuery EasyUI Datagrid组件默认视图分析
在Datagrid基础DOM结构的一文中,我对Datagrid组件的骨架做了很详细的描述.有了骨架还并不完整,还得有血有肉有衣服穿才行.强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健 ...
- JQuery EasyUI DataGrid动态合并单元格
/** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList ...
- 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...
- 关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...
随机推荐
- TCP/IP 在 Windows 下的实现
Windows 实现TCP/IP 协议也是建立在上一篇博客的OSI 基础之上的. 用户态是由ws2_32.dll 和一些其他服务提供者的 dll 共同实现,当中ws2_32.dll 是一个框架.能够容 ...
- JBPM4.4_工作流基础_准备jBPM4.4环境
1. 工作流基础 1.1. 工作流相关概念 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任 ...
- shell脚本学习总结08--比较与测试
程序中流程控制是由比较语句和测试语句处理的 算数比较 [ $var -gt 20 ] [ $var -gt 20 -a $var -lt 50 ] #使用逻辑与 [ $var -ne ...
- PHPStorm自动压缩YUI Compressor配置
File---Settings...---Tools---File Watchers 点击右边加号,添加: 在弹出窗中 主要是Program的内容,点击后面的省略点,默认目录下回出现yuicompre ...
- Hibernate传递list参数的例子
public Map<String, String> getAllFeedBack(Object[] obj){ Map<String, String> map = new H ...
- 常用SEO优化技巧
SEO是指搜索引擎优化 搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式.SEO的目的理解是:为网站提供生态式的自我营销解决方案,让网站在行业内占据领先地位,从而 ...
- js apply()、call() 使用参考
引入,求一个数组的最大值,有这么一种快捷方法:Math.max.apply(null,arr); 但是最初看 JavaScript高级程序设计 的时候,没看懂,原文(斜体表示)如下: 每个函数都包含两 ...
- cocos2d-x常用工具
这些工具平常也用到,不过没有像这样整理出来,这是我在网上看到的.就记录一下. 位图字体工具Bitmap Font Tools BMFont (Windows)FonteditorGlyph Desig ...
- 文艺青年、普通青年、2b青年到底是什么意思?
文艺青年.普通青年.2b青年到底是什么意思? 文艺青年就是脑子里跟别人想的不一样,思维跟人家相反或者另类的人. 普通青年呢就是像你一样,普普通通的. 2B青年就是黑铅笔青年,做事比较搞怪,古怪到让你哭 ...
- Python: 使用pip升级所有包
pip 当前内建命令并不支持升级所有已安装的Python模块. 列出当前安装的包: pip list 列出可升级的包: pip list --outdate 升级一个包: pip install ...