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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 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中for与foreach的区别分析
2011/03/09 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
19个Android常用工具类汇总
2014/12/30 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
js实现touch移动触屏滑动事件
2015/04/17 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python字符串中查找子串小技巧
2015/04/10 Python
Python选课系统开发程序
2016/09/02 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
python如何生成网页验证码
2018/07/28 Python
详解Python中的type和object
2018/08/15 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Opencv求取连通区域重心实例
2020/06/04 Python
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
2014年乡镇领导个人整改措施
2014/09/19 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
优秀员工事迹材料
2014/12/20 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
Python移位密码、仿射变换解密实例代码
2021/06/27 Python