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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 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中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
2014年端午节活动方案
2014/03/11 职场文书
业务员自荐信范文
2014/04/20 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
爱心活动计划书
2014/04/26 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
博士生专家推荐信
2014/09/26 职场文书
干部作风建设工作总结
2014/10/29 职场文书
南湾猴岛导游词
2015/02/09 职场文书
婚宴主持词
2015/06/30 职场文书
庆祝教师节主持词
2015/07/06 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android