<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DWR3.0文件上传</title>
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type='text/javascript' >
(function($){
$.fn.table=function(options){
if(this.length<1){
return;
}
var table=this.get(0);
$("tbody",table).remove();
if(options.columns){
this.data("columns",options.columns);
createTableHeader(options).appendTo(table);
}
if(options.data && options.data.length>0){
createTablebody(table,options).appendTo(table);
}
bingTableEvent(table,options);
};
$.fn.tableAddData=function(data){
createTablebody(this.get(0),{"data":data,columns:this.data("columns")},true);
};
function createTableHeader(options){
var columns=options.columns;
var thead=$("<thead><tr></tr></thead>");
$.each(columns,function(index,column){
var td=document.createElement("td");
$(td).attr("name",column.attribute);
$(td).prop("width",column.width);
$(td).text(column.name);
$("tr",thead).append(td);
});
return thead;
};
function createTablebody(table,options,addModel){
var tbody= addModel ? $("tbody",table) : $("<tbody></tbody>");
var domTr=$("thead tr",table).clone();
var data=options.data;
$.each(data,function(index,row){
var tr=domTr.clone();
$("td",tr[0]).each(function(cellIndex){
//if the column format function exists then call it
if(options.columns && $.isFunction(options.columns[cellIndex].format)){
var refAttribute=$(this).attr("name");
var formatResult=options.columns[cellIndex].format(row[refAttribute],row,cellIndex)
$(this).html(formatResult);
}else{
$(this).text(row[$(this).attr("name")]);
}
});
tr.appendTo(tbody);
});
return tbody;
};
function bingTableEvent(table,options){
$("thead tr td").on("click",function(event){
if(options.onsort){
options.onsort($(this).attr("name"),event)
}
});
$("tbody tr").on("dblclick",function(event){
if(options.onsort){
options.ontrdblclick(this,event)
}
});
}
})($);
$(document).ready(function(){
var options={
onsort:function(attr){alert("sort:"+attr)},
ontrdblclick:function(tr){alert(tr.innerHTML)},
columns:[{name:"<font>编号</font>",attribute:"id",width:"10%",format:function(value,item,index){return "CKF"+value}},
{name:"名称",attribute:"name",width:"30%"},
{name:"说明",attribute:"description",width:"30%"},
{name:"作者",attribute:"author",width:"30%"}
],
data:[
{id:"1",name:"<red>我是谁</red>",description:"my name is ckf. what's your name",author:"chen zhiwu"},
{id:"2",name:"魔幻世界",description:"my name is ckf. what's your name",author:"chen zhiwu"},
{id:"3",name:"你是谁",description:"my name is ckf. what's your name",author:"chen zhiwu"},
{id:"4",name:"what's your name",description:"my name is ckf. what's your name",author:"chen zhiwu"}
]
}
$("#mytable").table(options);
$("#btnAdd").on("click",function(){
var data=[{id:"5",name:"new record",description:"sadfsdfsadfsd",author:"chen kai"}];
$("#mytable").tableAddData(data);
});
});
</script>
</head>
<body>
<table id="mytable" style="border:1px solid red;width:500px;height:200px"></table>
<input type="button" value="add" id="btnAdd"/>
</body>
</html>
分享到：
相关推荐
jQuery table2excel插件（ ） 核心表导出代码概念的#Credit转到insin（在#javascript中在Freenode上达到），而核心代码则受启发 第一的！！ 谢谢你的关注。 我一直无法维护它，并找到了下面的项目，它看起来比这个...
本项目是基于JFinal和jQuery table开发的简单客户管理及进销存财务系统设计源码，共包含1087个文件，其中包括253个Java源文件、249个JavaScript文件等。系统采用了JFinal框架和jQuery table插件，为用户提供了一个...
bootstrap-table：基于 Bootstrap 的 jQuery 表格插件，通过简单的设置就可以拥有强大的单选、多选、排序、分页、编辑、导出、过滤（扩展）等功能
jQuery开发团队构建系统的改进。 1.4重要新特性： ·常用方法的性能大幅提升：重写了大部分较早期的函数； ·更容易使用的设置函数（setter function）：为所有对象新增了许多易用的设置函数； ·对Ajax的改进：引入...
bootstrap table是一个非常不错的，基于bootstrap的插件，它扩展和丰富了bootstrap表格的操作，如格式化表格，表格选择器，表格工具栏，分页等等。 最近基于bootstrap开发一个开台发布系统，就开发过程中，使用...
开发扩展其方法时使用$.extend方法，即jQuery.extend(object); 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用： 代码如下: var i = $.add(3,2); var j ...
api+实例解析 对于普通系统开发绝对够用了 演示范例 拖动与菜单 一般拖动 - Draggable 拖放 - DragDrop 拖放二 - DragDrop 拖放三 - DragDrop 缩放 - Resizable 滑动条 - Slider 菜单 - Menu 菜单...
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。目前在github上已经有2600多个Star，可见...
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。目前在github上已经有2600多个Star，...
先对jQuery制作方式，jQuery为开发扩展提拱了两个方法，分别是： jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 1.1、jQuery.fn.extend(object)...
雇员管理系统②-model1模式简单登录 9-19 3.雇员管理系统③-model1模式数据库登录 9-19 4.雇员管理系统④-model1模式雇员分页 9-19 5.雇员管理系统⑤-分层模式管理员登录 9-20 1.回顾 9-20 2.雇员管理系统⑥-分层...
SYSTABLE version1.2 table表格插件，是本人独立开发的后台通用系统SYSUI的扩展js插件，纯js,不依赖jquery库。经测试，支持IE,360,火狐，谷歌，safari等主流浏览器,支持扩展。是一款不错的table表格插件。 支持...
SYSBOXUPS1.2弹窗盒子，是本人独立开发的后台通用系统SYSUI的扩展js插件，纯js,不依赖jquery库。经测试，支持IE6，7，8，IE,360,火狐，谷歌，safari等主流浏览器，支持移动端,支持扩展。是一款不错的前端弹窗插件。 ...
4、开放的系统平台架构，完善的二次开发支持，无限扩展功能 五、功能特点 1、系统采用的dao对象使用SQLUtility SQL语句工具类，可根据对象创建SQL语句，对数据的增删改操作不在写繁杂的SQL语句，使开发效率大大提高...
生成器＃在终端中的用法-git clone 表单生成器-nodejs server.js >> 将Form构造函数与您的自定义道具一起使用使用一些公共方法获取Form对象。 var yourForm = new Form（yourprops）; #Example：$ .get（'../ json /...
10、新增 'jquery.extensions.js'，增加一些实用的jQuery扩展方法，便于进行其他组件的开发，移除原'unities.js' 11、增加array.js，提供一些操作数组的实用方法 12、调整了dist目录结构，第三方组件和适合单独调用...
支持 ToC（Table of Contents）、Emoji表情、Task lists、@链接等 Markdown 扩展语法；支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;支持识别和解析 HTML 标签，并且支持自定义...
3.3.2 简单、直观的DIV布局 7 3.3.3 DIV布局问题的终极解决方案 9 3.3.4 解决DIV被撑爆的问题 12 3.3.4.1 DIV撑爆的问题 12 3.3.4.2 图片撑爆问题的解决办法 13 3.3.4.3 文字撑爆问题的解决办法 13 3.4 Java Web应用...
jQuery 没有基本的数据模型的概念，所以需要获取数据的数量（从table/div或者专门定义的CSS class），如果需要在某些SPAN里显示数据的数量，当添加新数据的时候，你还要记得更新这个SPAN的text。当然，你还要判断当...