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 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
小程序云开发之用户注册登录
May 18 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
php7下的filesize函数
2019/09/30 PHP
js下利用控制器载入对应脚本
2010/07/17 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Python random模块常用方法
2014/11/03 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
大足石刻导游词
2015/02/02 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
毕业酒会致辞
2015/07/29 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
Redis中一个String类型引发的惨案
2021/07/25 Redis