[js开源组件开发]table表格组件

table表格组件

表格的渲染组件,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请求的类型
时间: 2024-08-04 10:58:26

[js开源组件开发]table表格组件的相关文章

[js开源组件开发]tip提示组件

tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件.效果如下图所示: 大概就是这样了,不复杂的东西,也很实用. 它的DEMO实例请点击这里http://lovewebgames.com/jsmodule/tip.html 它的源码托管在github 请点击这里https://github.com/tianxiangbing/tip <table s

[js开源组件开发]ajax分页组件

ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示的是这个分页控件的两种基本形态,样式可以自己定制,包括文案内容. 这个分页控件的demo演示地址是: http://www.lovewebgames.com/jsmodule/paging.html 同时,它还是开源的,它的git 地址是:https://github.com/tianxiangbi

jQuery组件开发之表格隔行选中效果实现

一.效果展示如下 jQuery组件之表格插件源码 1 //表格选中插件 2 //方式一 3 (function($){ 4 var chosTabBgColor = function(options){ 5 //设置默认值 6 var options = $.extend({ 7 odd:"odd", //奇数 8 even:"even",//偶数 9 selected:"selected" 10 },options); 11 12 $(&quo

Element-ui组件库Table表格导出Excel表格--存在重复数据问题

借鉴:https://www.jianshu.com/p/1971fc5b97ca https://blog.csdn.net/qq_40614207/article/details/94003793 贴出代码 // 定义导出Excel表格事件 exportExcel() { // 解决生成重复数据-因为使用l fixed属性 var fix = document.querySelector('.el-table__fixed') var wb // 判断要导出的节点中是否有fixed的表格,如

Ant Design of Vue —— Table表格组件 —— 设置动态表头

Column配置 比如:操作列 { key: 'action', scopedSlots: { customRender: 'action', title: '变量名' }, align: 'center' } 代码段 <template slot="变量名">{{动态表头名称}}</template> 原文地址:https://www.cnblogs.com/duoer/p/12096895.html

[js开源组件开发]数字或金额千分位格式化组件

数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和数字的千分位和小数点控制的组件,它的作用主要是在输入框时限制输入的内容为数字.也可以用于普通标签的数字格式化,效果如下图: demo演示地址请点击 http://www.lovewebgames.com/jsmodule/format-number.html 源码github托管地址请点击https://gi

[js开源组件开发]query组件,获取url参数和form表单json格式

query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……,最近项目紧,几个小组,只有我一个前端,公司对前端的定位不清晰,导致前端人员过少的情况.所以还得促进公司前端人员增长,不然再这么玩下去,我要被玩死了,一个公司,不可能靠一个资深前端来支撑二三十个开发的需求,这是不现实的,特别是现在的页面不再是复制粘贴的前况下.我默默耕芸,所以这次我整理了这一个月里所有

JS表格组件神器bootstrap table详解(基础版)

这篇文章主要介绍了JS表格组件神器bootstrap table,bootstrap table界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用.

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成