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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
如何提高数据访问速度
Dec 26 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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.MVC的模板标签系统(一)
2006/09/05 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Python解释执行原理分析
2014/08/22 Python
Python中处理时间的几种方法小结
2015/04/09 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
浅谈django orm 优化
2018/08/18 Python
Python中字符串与编码示例代码
2019/05/20 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
Python偏函数实现原理及应用
2020/11/20 Python
荷兰家电销售网站:Welhof
2020/12/08 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
实习教师自我鉴定
2013/12/09 职场文书
应聘自荐信
2013/12/14 职场文书
制作部班长职位说明书
2014/02/26 职场文书
西柏坡导游词
2015/02/05 职场文书
交通安全教育心得体会
2016/01/15 职场文书