javascript表格的渲染组件


Posted in Javascript onJuly 03, 2015

表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tianxiangbing/table

如上图所示,功能基本包括常用表格中遇到的分页、搜索、删除、AJAX操作。由于是用的HANDLEBARS渲染的,所以样式可能很好的控制,要加新的功能也较容易。

调用例子

html

<div class="form">
  名称: <input type="text" name="gname"> <a href="#" id="search">search</a>
</div>
<div id="tab-list" ajaxurl="list.json">
  loading...
</div>
<div id="pager"></div>

模板

<script type="text/x-handlebars-template" id="tpl-list">
  <table class="tab-list">
    <thead>
      <tr>
          <th class="first-cell">序号</th>
          <th>商品条码</th>
          <th>商品名称</th>
          <th>状态</th>
          <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {{#each data}}
      <tr>
          <td class="first-cell">{{@index}}</td>
          <td>{{goods_bn}}</td>
          <td>{{goods_name}}</td>
          <td>上架</td>
          <td><a class="js-ajax" js-ajax-param="id={{goods_id}}" href="action.json">下架</a> <a class="js-delete" href="action.json">删除</a></td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</script>

js

<script>
  var table = new Table($('#tab-list'), $('#tpl-list'), $('#pager'), {}, $('#search'));
  table.init({type:'post'});
</script>

属性和方法
constuctor:function(table, temp, page, param, search, callback, filterCon)

构造函数,table是指存放表格的容器,可以是一个空的div,也可以是table里的一个tbody;
temp是指表格的模板,这里是script节点的jquery对象
page 需要放置分页控件的容器
param 初始化带的参数 type json
search 搜索按钮节点,你的祖先级中要有一个class为form的节点,会利用[query](https://github.com/tianxiangbing/query)格式化里面为参数,进行查询数据操作
callback 加载后的回调
filterCon 筛选过滤

init:function(settings)
init是启动方法,目前的settings中仅包含{type:'get'} ,ajax请求的类型

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
Javascript实现计算个人所得税
May 10 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 #Javascript
移动端JQ插件hammer使用详解
Jul 03 #Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 #Javascript
Javascript实现字数统计
Jul 03 #Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 #Javascript
jQuery中 delegate使用的问题
Jul 03 #Javascript
JavaScript实现select添加option
Jul 03 #Javascript
You might like
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python3多线程操作简单示例
2018/05/22 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
中学教师岗位职责
2013/11/26 职场文书
大学运动会通讯稿
2014/01/28 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
抄作业检讨书
2014/02/17 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2014年个人年终总结
2015/03/09 职场文书
太行山上观后感
2015/06/05 职场文书
投资入股协议书
2016/03/22 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
anaconda python3.8安装后降级
2021/06/11 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫