一个动态扩展表格控件列和行的 jQuery 插件

不过这并不影响使用鸭!

看这里:https://github.com/zhuwansu/table-ext.js

一个简单的示范

html

<table id="tableId">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>个人描述</th>
<th style="width: 80px;">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="display:none">
<table id="tableTrTemplate">
<tbody>
<tr>
<td><input name="name" /></td>
<td><select name="sex">
<option value="">保密</option>
<option value="0">男</option>
<option value="1">女</option>
</select></td>
<td><textarea name="description"></textarea></td>
</tr>
</tbody>
</table>
</div>

js

 var util = $(selector).tableUtil();
util.rowHtml = $('#tableTrTemplate tbody').html();
util.addRow();

写了两个示例

sample1-动态行

sample2-动态列

另外项目借此还实现了 jQuery Validate 、表头控件一键同步到表体输入控件。

表格控件 radio、checkbox 、span 都是支持的。

另外:1、为了使 表格可以被 form 提交,我把所有 控件的 name 都追加了行索引(这也解决了 radio、checkbox 的问题),然后将 name 缓存到 z-name 属性中,你可以通过 attr('z-name') 获取原 name。

2、在 加载数据行的时候,如果原数据中 id 那么在 调用 rows() 方法的时候可以获取 id 哒哒哒,如果通过表单提交则需要自己搞一个 隐藏框。

后面有空再写详细点吧。

截图:

行的自定义

表头的自定义

如果要用的话,有任何问题欢迎来提

一个动态扩展表格控件列和行的 jQuery 插件的更多相关文章

  1. Ext入门学习系列(五)表格控件(1)

    上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...

  2. QRowTable表格控件(四)-效率优化之-优化数据源

    目录 一.开心一刻 二.问题分析 三.重写数据源 1.自己存储数据 2.重写data接口 四.比较 五.相关文章 原文链接:QRowTable表格控件(四)-效率优化之-优化数据源 一.开心一刻 一程 ...

  3. QRowTable表格控件(五)-重写表头排序、支持第三次单击恢复默认排序

    目录 一.原生表格 二.效果展示 三.实现方式 1.排序列定制 2.排序交互修改 四.相关文章 原文链接:QRowTable表格控件(五)-重写表头排序.支持第三次单击恢复默认排序 一.原生表格 开发 ...

  4. Ext入门学习系列(五)表格控件(2)

    上节学习了Ext中表格控件,从创建,到定义数据源.绑定显示,大体明白了一个基本的表格控件是怎么实现的.而我们用表格控件多用于从各种数据源接收数据并显示出来,并不是写死的.本章我们就不同数据源的不同实现 ...

  5. Ext表格控件

    表格控件其实也就是帮我们完成了数据的填充工作而已,具体的数据源.要显示的列,列的定制.数据源中的哪条数据显示在哪个列中等属性还是需要我们自己手动配置的,所以我们分下面几步来完成网格控件的数据绑定: 1 ...

  6. net 表格控件

    一个开源的表格控件,界面像Excel,看来很好,有机会在项目中使用:ReoGrid https://reogrid.net/

  7. DevExpres表格控件运行时动态设置表格列

    本文是系列文章,陆续发表于电脑编程技巧与维护杂志. DevExpres产品是全球享有极高声誉的一流控件套包产品!国内典型用户包括:用友.金蝶.神州数码.工信部.中国石化.汉王科技等众多大中型科技型企业 ...

  8. QRowTable表格控件-支持hover整行、checked整行、指定列排序等

    目录 一.开心一刻 二.嘴一嘴 三.效果展示 四.浅谈实现 五.自定义数据源 1.data函数 2.flags函数 六.自定义视图 1.目的 2.问题分析 七.测试 八.相关文章 原文链接:QRowT ...

  9. devexpress表格控件gridcontrol图片列,按钮列,时间列等特殊列的实现

    1.项目中经常会在表格中插入按钮列,图片列,表格列一些非文本的特殊列.如何在devexpress表格控件gridcontrol中实现呢?以下列举一个实现添加图片列,按钮列,时间列,按钮列,开关列的示例 ...

随机推荐

  1. Python--day62--使用Bootstrap样式的出版社

    没有使用之前: 使用Bootstrap样式之后:

  2. PHP IF判断 简写

    第一种:IF 条件语句 第二种:三元运算 第三种:&& .|| 组成的条件语句 第一种: IF 基础,相信绝大多数人都会: 第二种:  c=a>b ? true:false  / ...

  3. codeforce 380(div.2)

    A B 略 C:二分,贪心 设d(i, v)为 剩余油量为v时,车开距离i 所需要的最小时间,使用线性规划不难算出: if v < i return INF; //无法到达 if v > ...

  4. 一图理解vue生命周期

    博客园上传图不太清晰,可以查看我的CSDN https://blog.csdn.net/jiaoshuaiai/article/details/90046736 感谢: https://segment ...

  5. NuGet 如何设置图标

    在找 NuGet 的时候可以看到有趣的库都有有趣的图标,那么如何设置一个 NuGet 的图标 在开始之前,请在nuget官方网站下载 NuGet.exe 同时设置环境变量 环境变量设置的方法就是将 N ...

  6. js 处理json

    json 分为两种结构  数组  对象 对象  { } 对象里的键值对  1.键值对之间用冒号链接  2.键必须用“”包裹  3.值如果是字符串  就用“”包裹   如果是数字  则不需要 4.键值对 ...

  7. CSS兼容性问题的解决方式(更新中···)

    1.清除浮动的兼容性(低版本的浏览器不兼容问题) .clearfix:after{ content:""; clear:both; display:block; visibilit ...

  8. CUP计算资源争抢通过IIS启用处理器关联解决

    由于业务的复杂性,我们在客户环境部署的时候,采用的是预装好在一台机器然后再把机器安装到客户环境,所以为了简单方便,我们把所有的服务都安装到一台机器上面了. 在正常的使用过程中是没有任何问题的.但是当有 ...

  9. 剑指Offer-62.数据流中的中位数(C++/Java)

    题目: 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值.我们使 ...

  10. 【题解】CF742E (二分图+构造)

    [题解]CF742E (二分图+构造) 自闭了CodeForces - 742E 给定的条件就是一个二分图的模型,但是有一些不同.不同就不同在可以出现相邻两个点颜色相同的情况. 构造常用方法之一是按奇 ...