- 浏览: 55484 次
- 性别:
- 来自: 苏州
文章分类
- 全部博客 (32)
- java (2)
- js (8)
- jquery (4)
- 随便说说 (4)
- Database, SQL (1)
- html (1)
- toolkit (2)
- python (2)
- django (2)
- helper (2)
- cookies (3)
- git (0)
- javascript基础 (1)
- hibernate (0)
- ibatis (0)
- 网上支付 (0)
- openstack (0)
- Mac (1)
- MySQL (1)
- linux (1)
- Postgresql (0)
- J2EE (0)
- 设计模式 (0)
- 面向对象 (0)
- hadoop (1)
- ubuntu (0)
- UML (0)
- Oracle (0)
- virtualbox (0)
- esb (0)
- mybatis (0)
- translate (0)
- struts2 api (1)
- jquery-ui (0)
- spring (0)
- jquery validation (0)
- web (0)
- spring mybatis (0)
- 单元测试 (0)
- eclipse (0)
- maven (0)
- java junit (0)
- editplus (0)
- jpa (0)
- jpa hibernate (1)
- sql (0)
- jpql (0)
- 杂 (0)
- shiro (0)
- filter (0)
- junit (1)
- tomcat (0)
- struts2 (1)
- spring-data jpa (0)
- ImageIO jpg (0)
- cms (0)
- php (0)
- node js (0)
- NodeJS (1)
- keystone (0)
- sublime (1)
- aws ec2 (0)
- pdf (0)
- design pattern (0)
- 条件查询(Criteria Queries) (0)
- jenkins (0)
- bootstrap (0)
- springside (0)
- apache (0)
最新评论
-
tokyo2006:
不错,经验之谈是最好的
收集记录一些在使用Python、Django中遇到的问题及解决方法 -
zhuchao_ko:
自己写的操作等待浮出层
table.panel是基于jquery开发的用于table的简单行操作的插件。
这个是自己在实际项目中写的一个基于jquery-1.4.2.js的小插件。
今整理出来,与大家分享。
本来是打算尽量的与自己原来的业务分离,做的更单纯些。
但却发现很难做到完全与先前的业务分离,因此里面还保留了一些先前业务的影子。
例如关于date部分的配置,可能有些多余,也不太容易向使用者解释。不过,感觉去不去好像也无所谓,并且同时也提供了默认的配置,故暂时保留了下来。
代码还有很多需要改进的地方,将持续更新
下面介绍下此插件实现的功能:
1.行(上、下)移动
* 选中某一行后,可以点击上下箭头图标,上下移动此行。
2.行选中
* 单击某一单元格,为选中行加灰背景色,单元格加蓝背景色,行的selected属性设为true。
3.行状态变换:新增,修改,删除,初始(或者叫修改完成,已与数据库同步)
4.行“删除”
* 不是真实删除,只是打上删除标记(为行加上delete属性,并且delete的值大于0;delete属性标记删除的顺序),行状态改为删除;并且设置行内的可编辑项为disabled
5.撤销行“删除”
* 依次倒序移除有删除标记的行的删除标记(从delete值最大的开始),恢复行状态为删除前的状态
6.行清空
* 清空选中行的可编辑项
a.对于input[type="text"],textarea,清空输入内容
b.对于input[type="checkbox"],input[type="radio"],取消选中状态;如果有default="true"属性,则设置为选中状态
c.对于select,如果option中有default="true"的,设为选中状态;如果没有,则设置第一项为选中状态
d.对于class为dateTd的列,input的值设置为当前的时间
* 行状态改为新增
7.新增行
* 默认为复制第一行清空后的行,行状态为新增
8.“定制化功能”
可通过参数设置功能按钮[行上移、行下移、当前行前插入新行、最后追加行、行"删除"、撤销行"删除"、行内容清空]是否出现。
upEnable: true, /* true, false;default:false*/
downEnable: true, /* true, false;default:false*/
insertEnable: true, /* true, false;default:false*/
deleteEnable: true, /* true, false;default:false*/
backEnable: true, /* true, false;default:false*/
clearEnable: true, /* true, false;default:false*/
insertBottomEnable: true, /* true, false;default:false*/
例如:demo4:
其他配置
1.插入新行时,复制选中前一行
设置clonePrevious为true。
例如:demo2
2.空表格的处理。
由于空表格时,没办法选中行,也没有行模板的备份。
为了解决这个问题,提供了一个办法:即在表格中放入一个空白行,并在tr上加一个名为PKValue,值为-1的属性
插件将在表格初始化中用它作为模板,并且在表格初始化完成后,移除掉此行
例如:demo3
3.提供用户自定义行的方法接口
使用generateTr配置
generateTr:{
method: 方法名字的字符串,
args: 方法参数
}
例如:demo5
4.可以定制class为dateTd列的input内的日期格式:
dateFormat4Display: "MM/dd/yyyy HH:mm:ss", /* dateFormat4Display*/
dateFormat4Save: "MM/dd/yyyy HH:mm:ss", /* dateFormat4Save*/
这里主要是为了解决自动生成的日期,在显示上和存储上可能不一致的问题。
在input上需要加一个自定义属性date。
附件内有demo
源码中date.pattern.js来源于网络,记不清是在哪找的了,在此感谢date.pattern.js的作者,如有版权问题,请告知。
发表评论
-
jquery工具
2014-06-12 10:01 0单元测试 http://qunitjs.com/ -
基于jquery的回到顶部插件
2014-06-12 09:15 0/** * 回到顶部功能 */ (function ... -
jquery 插件
2014-06-03 18:06 0jquery 插件 http://dhtmlx.com/ ... -
jquery ui dialog 扩展
2014-06-03 16:04 0jquery ui dialog 扩展 -
jquery固定头部插件
2014-05-22 11:09 0jquery固定头部插件 https:// ... -
jquery cookie 插件
2014-05-18 13:54 0jquery.cookie 使用方法 http://www ... -
jquery validation插件
2014-04-28 14:55 0api http://banu.blog.163.com/ ... -
jquery 1.9.1变更
2014-04-11 15:57 0.live() ->.on jQuery中li ... -
jquery plugin
2014-01-07 11:32 0jquery ui http://api.jqueryu ... -
解决了jquery.bgiframe.min.js的一个bug (jquery.bgiframe.min.js, line 10 character 978)
2012-02-01 15:31 3620解决了jquery.bgiframe.min.js的一个bug ... -
收集记录一些使用Javascript,JQuery时遇到的问题
2011-12-28 11:04 1069收集记录一些使用Javascript,JQuery时遇到的问题 ... -
转帖:jQuery: 随滚动居中效果
2011-06-15 12:22 1327在网上找到了一个实现“ 随滚动条滚动居中效果 ” ...
相关推荐
`.table`和`.table-bordered`类用于创建一个带有边框的表格。表格的结构包括表头(thead)和表体(tbody),用于显示数据。 3. 面板底部(.panel-footer):用于放置页脚信息,例如作者名称。这里的CSS样式定义了它...
jQuery基于Bootstrap分页插件是一款分页插件设置固定列表分页显示,支持动态分页数据代码。 jQuery(document).ready(function($){ for (var i = 1; i ; i ) { $('.list-group').append('<li class="list...
jQuery(document).ready(function($){ for (var i = 1; i ; i ) { $('.list-group').append('<li class="list-group-item"> Item ' i '</li>'); } $('.list-group').paginathing({ perPage: 5, ...
在表格(Table)设计中,有时我们需要合并单元格来达到特定的展示效果,例如创建标题行或列,或者为了美观和布局对齐。在HTML、CSS以及JavaScript中,都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...
jQuery EasyUI 是一个基于 jQuery 的简单用户界面插件集合。它提供了一系列丰富的 UI 组件,如按钮、对话框、网格等,可以帮助开发者快速地构建美观且功能强大的 Web 应用程序。EasyUI 通过简洁的 API 设计极大地...
卷 (USB)Project 的文件夹 PATH 列表 卷序列号码为 0006EE44 CCBE:F425 I:. │ .project │ pom.xml │ pom.xml~ │ text.txt │ ├─.settings │ org.maven.ide.eclipse.prefs ...│ │ org.eclipse.wst.common....
- `$` 符号是jQuery的核心函数,用于选择元素、执行操作或绑定事件。 - `$(document).ready()` 用于确保页面加载完成后执行代码。 2. **EasyUI 组件** - **对话框(Dialog)**:提供弹出式窗口,用于显示信息或者...
- New Demo: Basic jQuery 0.81.2.801 +---------------------------------------------------------------------------------------- - TUniScreeMask issue with borderless MainForm - Installer: Bug resolved ...
- **面板(Panel)**:用于封装内容,可以有标题、边框和滚动条,常用于展示模块化内容。 - **树形控件(Tree)**:展示层级结构的数据,如目录、组织结构等。 - **表格(Table)**:呈现表格数据,支持数据操作和...
标题中的“使用jquery-easyui写的简单通用查询”指的是利用jQuery EasyUI框架创建的一个具有基本查询功能的前端界面。jQuery EasyUI是一个基于jQuery的UI库,它提供了丰富的组件和易于使用的API,帮助开发者快速构建...
这个“jquery-easyui-1.3.3v1”压缩包包含了该框架的1.3.3版本,这是一个重要的更新,主要体现在对一些已知问题的修复以及新特性的添加。 1. **jQuery EasyUI 的核心概念**: - **jQuery**: jQuery 是一个快速、...
- **EasyUI 组件**: EasyUI 将jQuery的功能进一步扩展,提供了如`datagrid`(数据网格)、`panel`(面板)、`dialog`(对话框)等丰富的UI组件。 2. **组件的使用**: - **初始化组件**: 使用`$(selector)....
在"jquery-easyui-1.2.6"这个压缩包中,包含了该版本的完整源码,使得开发者可以深入理解其工作原理,进行自定义修改或二次开发。 1. **jQuery基础** - jQuery是JavaScript的一个库,简化了HTML文档遍历、事件处理...
<script type="text/javascript" src="../jquery-1.4.2.min.js"> <script type="text/javascript" src="../jquery.easyui.min.js"> $(function(){ $('#aa').accordion({ width: 400, height: 200, fit: ...
### jQuery EasyUI 教程知识点概览 #### 1. 基本拖放功能 - **概述**:本节介绍如何使用EasyUI使HTML元素变得可拖动。 - **实现步骤**: - **创建HTML元素**:通过创建3个`<div>`元素,并赋予它们不同的ID和类名。...
<script type="text/javascript" src="../jquery-1.4.2.min.js"> <script type="text/javascript" src="../jquery.easyui.min.js"> ``` --- #### 二、DateBox(日期选择器) **2.1 概述** DateBox 是一个强大的...
- **面板(Panel)**:用于组织内容,可以包含其他组件,使用`.panel()`方法创建。 - **按钮(Button)**:创建交互式按钮,如提交、重置、链接等,使用`.button()`方法创建。 3. **数据绑定**:EasyUI与后台数据源...
在ASP.NET开发中,动态创建元素是常见的需求之一,尤其是对于网页上的表格(Table)元素。动态添加Table表格可以提供灵活的数据展示方式,适应不同场景和数据量的变化。本示例将详细介绍如何在ASP.NET后台使用C#语言...