基于jquery的动态创建表格的插件
基于jquery的动态创建表格的插件
发布时间：2016-12-30 来源：查字典编辑
摘要：废话少说直接进入主题，表格功能:1、添加2、删除3、获取值4、动态填充数据5、动态设置焦点6、键盘左右上下键控制单元格焦点7、单元格添加正则...

废话少说直接进入主题，

表格功能:

1、添加

2、删除

3、获取值

4、动态填充数据

5、动态设置焦点

6、键盘左右上下键控制单元格焦点

7、单元格添加正则验证功能

WebForm4.aspx

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="table.WebForm4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title></title>

<script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

<script src="jquery-1.3.2.js" type="text/javascript"></script>

<script src="jquery.DynamicTable.js" type="text/javascript"></script>

<link href="style2.css" type="text/css" rel="Stylesheet"/>

<script type="text/javascript">

var rowtmplate = "<tr><td><input type='text'/></td>";

rowtmplate += "<td><input type='text'/></td>";

rowtmplate += "<td><input type='text'/></td>";

rowtmplate += "<td><input type='text'/></td>";

rowtmplate += "<td><input type='text'/></td>";

rowtmplate += "<td><a href='#' >删除</a></td></tr>";

$(document).ready(function() {

$(this).bind('keyup', function(e) {

switch (e.keyCode) {

case 38: //上 ↑

var arr = $.fn.getFocus();

var rowIndex = arr[0] - 1;

$.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] });

$.fn.setCellsFocus();

break;

case 40: //下 ↓

var arr = $.fn.getFocus();

var rowIndex = arr[0] + 1;

$.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] });

$.fn.setCellsFocus();

break;

default:

break;

}

});

$('#mytbl').DynamicTable({

rowCount: 3, //添加行数

identity: 1, //第1列自动编号

arrFocus: [2, 1], //第一个单元格设置为焦点

rowTmplate: rowtmplate //行模版

});

$('#mytbl').BindEvent({

eventName: "click",

colIndex: 1,

fn: alertMsg

}); //默认给第一列绑定click事件

$('#mytbl').setCellsFocus(); //设置第一个单元格为焦点

$('#mytbl').deleteRow(); //默认给第6列绑定删除事件

$('#mytbl').AutoFillData({ colIndex: 2, fn: getData }); //默认给第二列绑定自动填充数据

$('#mytbl').Identity({ colIndex: 1 }); //默认给第一列自动排序

$('#mytbl').validationText({ reg: /^((d+.d{2})|d+)$/, colIndex: 5, defalutValue: 0.00 }); //默认给第二列添加验证(只能输入money格式)

});

//添加行

function addRow(count) {

$('#mytbl').addRow({ rowCount: count });

$('#mytbl').Identity();

$.fn.deleteRow();

}

//获取自动填充数据

function getData(key) {

var arr = [];

arrFoucs = $.fn.getFocus();

$.ajax({

type: "post",

async: false, //控制同步

url: "getData.ashx",

dataType: "json",

cache: false,

success: function(data) {

var idx = arrFoucs[0] - 2;

arr.push(data[idx].id);

arr.push(data[idx].Name);

arr.push(data[idx].Code);

arr.push(data[idx].Units);

arr.push(data[idx].Price);

},

Error: function(err) {

alert(err);

}

});

$.fn.setCellsFocus({ rowIndex: arrFoucs[0], colIndex: 4 });

return arr;

}

function alertMsg() {

arrFoucs = $.fn.getFocus();

alert('你单击了坐标X：'+arrFoucs[0]+' Y：'+arrFoucs[1]+'的单元格');

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<table cellpadding="0" cellspacing="0" id="mytbl">

<tr>

<td>序号</td>

<td>产品名称</td>

<td>产品代码</td>

<td>单位</td>

<td>单价</td>

<td><a href="#">添加5行</a></td>

</tr>

</table>

<input type="button" value="获取值" />

</div>

</form>

</body>

</html>

jquery.DynamicTable.js

复制代码 代码如下:

///<reference path="jquery-1.3.2-vsdoc2.js" />

2

3 (function($) {

4 var rowtmplate = "";

5 var arrFocus = [];

6

7 $.fn.DynamicTable = function(options) { //定义插件的名称，这里为userCp

8 var deafult = {

9 //以下为该插件的属性及其默认值

rowCount: 5, //添加行数

identity: 1, //第1列自动编号

arrFocus: [2, 1], //第一个单元格设置为焦点

rowTmplate: "" //行模版

};

var ops = $.extend(deafult, options);

rowtmplate = ops.rowTmplate;

arrFocus = ops.arrFocus;

$(this).addRow(ops.rowCount);

};

/*通过行模版添加多行至表格最后一行后面*/

/*count--添加行数*/

$.fn.addRow = function(options) {

var deafult = {

rowCount: 5

};

var ops = $.extend(deafult, options);

var rowData = "";

var count = ops.rowCount;

for (var i = 1; i <= count; i++) {

rowData += rowtmplate;

}

$(this).find('tr:last-child').after(rowData);

CellsFocus();

};

/*动态给某列绑定事件,事件被触发时执行fn函数*/

/*eventName--事件名称;colIndex--列索引(从1开始);fn--触发函数*/

$.fn.BindEvent = function(options) {

var deafult = {

eventName: 'click',

colIndex: 1,

fn: function() { alert('你单击了此单元格!') }

};

var ops = $.extend(deafult, options);

eventName = ops.eventName;

colIndex = ops.colIndex;

fn = ops.fn;

$("tr:gt(0) td:nth-child(" + colIndex + ")").bind(eventName, fn);

};

/*给某列绑定单击删除事件*/

/*colIndex--列索引(从1开始)*/

$.fn.deleteRow = function(options) {

var deafult = {

colIndex: 6

};

var ops = $.extend(deafult, options);

var colIndex = ops.colIndex;

$("tr:gt(0) td:nth-child(" + colIndex + ")").bind("click", function() {

var obj = $(this).parent(); //获取tr子节点对象

if (confirm('您确定要删除吗？'))

obj.remove();

});

};

/*自动给指定列填充序号*/

/*colIndex--列索引(从1开始)*/

$.fn.Identity = function(options) {

var deafult = {

colIndex: 1

};

var ops = $.extend(deafult, options);

var colIndex = ops.colIndex;

var i = 1;

$("td:nth-child(" + colIndex + ")").find('input').each(function() {

$(this).attr('value', i)

i++;

});

};

/*获取焦点单元格坐标*/

$.fn.getFocus = function() {

return arrFocus;

};

/*设置焦点单元格坐标*/

/*rowIndex--行索引(从1开始);colIndex--列索引(从1开始)*/

$.fn.setFocus = function(options) {

var deafult = {

rowIndex: 2,

colIndex: 1

};

var ops = $.extend(deafult, options);

var rowIndex = ops.rowIndex;

var colIndex = ops.colIndex;

arrFocus[0] = rowIndex;

arrFocus[1] = colIndex;

};

/*当某个单元格中输入数据,按Enter键后自动根据输入的值从后台检索数据填充到该行对应列*/

/*colIndex--第几列输入数据按Enter键触发事件;fn--带参的回调函数*/

$.fn.AutoFillData = function(options) {

colIndex = options.colIndex;

fn = options.fn;

$("td:nth-child(" + colIndex + ")").bind("keyup", function() {

var obj = $(this).parent(); //获取tr子节点对象

$(this).find('input').each(function() {

if (event.keyCode == 13) {

var vl = $(this).val();

var arr = new Array();

arr = fn(vl);

var i = 0;

obj.find("td").each(function() {

$(this).find("input").each(function() {

$(this).attr('value', arr[i]);

i++;

});

});

}

});

});

};

/*设置某个单元格为焦点*/

/*rowIndex--行索引(从1开始);colIndex--列索引(从1开始)*/

$.fn.setCellsFocus = function(options) {

var deafult = {

rowIndex: arrFocus[0],

colIndex: arrFocus[1]

};

var ops = $.extend(deafult, options);

var rowIndex = ops.rowIndex;

var colIndex = ops.colIndex;

$("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() {

$(this).find('input').each(function() {

$(this)[0].focus();

$(this).attr('value', $(this).attr('value'));

arrFocus = [];

arrFocus.push(rowIndex);

arrFocus.push(colIndex); //更新焦点数组值

});

});

};

/*设置某个单元格文本值为选中状态*/

/*rowIndex--行索引(从1开始);colIndex--列索引(从1开始)*/

$.fn.setCellsSelect = function(options) {

var deafult = {

rowIndex: arrFocus[0],

colIndex: arrFocus[1]

};

var ops = $.extend(deafult, options);

var rowIndex = ops.rowIndex;

var colIndex = ops.colIndex;

$("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() {

$(this).find('input').each(function() {

$(this)[0].select();

});

});

};

/*某个单元格添加验证功能*/

/*reg--正则表达式;colIndex--列索引(从1开始);defaultValue--验证失败默认给单元格赋值*/

$.fn.validationText = function(options) {

var deafult = {

reg: /^((d+.d{2})|d+)$/,

colIndex: 2,

defaultValue: 0

};

var ops = $.extend(deafult, options);

var reg = ops.reg;

var colIndex = ops.colIndex;

var defaultValue = ops.defaultValue;

$("tr:gt(0) td:nth-child(" + colIndex + ")").each(function() {

$(this).find('input').each(function() {

//验证

$(this).bind('blur', function() {

var vl = $(this).attr('value');

if (!reg.test(vl))

$(this).attr('value', defaultValue);

});

});

});

};

/*获取表格中的值*/

$.fn.getValue = function(options) {

var deafult = {

rowIndex: 0, //行坐标(从2开始)

colIndex: 0 //列坐标(从1开始)

};

var ops = $.extend(deafult, options);

rowIndex = ops.rowIndex;

colIndex = ops.colIndex;

var val = "";

if (rowIndex == 0) { //获取所有行的数据

$('tr:gt(0)').each(function() {

$(this).find("td").each(function() {

$(this).find("input").each(function() {

val += $(this).attr('value') + "&";

});

});

val = val.substring(0, val.length - 1) + "|";

});

}

else {

if (colIndex == 0) { //获取某行数据

$('tr:nth-child(' + rowIndex + ')').each(function() {

$(this).find("td").each(function() {

$(this).find("input").each(function() {

val += $(this).attr('value') + "&";

});

});

val = val.substring(0, val.length - 1) + "|";

});

}

else { //获取某个单元格的值

$("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() {

$(this).find('input').each(function() {

val += $(this).attr('value');

});

});

}

}

return val;

};

/*某个单元格获取焦点后更新焦点坐标*/

function CellsFocus() {

var colCount = $("tr:nth-child(1) td").size(); //获取每行共有多少个单元格

$("tr:gt(0) td").each(function() {

var obj = $(this);

$(this).find('input').each(function() {

$(this).bind('focus', function() {

var cellTotal = $('td').index(obj); //获取某单元格的索引

arrFocus[0] = parseInt(cellTotal / colCount) + 1; //第几行

arrFocus[1] = cellTotal % colCount + 1; //第几列

});

});

});

};

})(jQuery);

getData.ashx

复制代码 代码如下:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

namespace table

{

/// <summary>

/// $codebehindclassname$ 的摘要说明

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class getData : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.Clear();

string value = GetResult();

context.Response.Write(value);

context.Response.End();

}

private string GetResult()

{

string result = string.Empty;

result = @"

[{""id"":""1"",""Name"":""绿茶"",""Code"":""1371"",""Units"":""斤"",""Price"":""200""},

{""id"":""2"",""Name"":""红茶"",""Code"":""1372"",""Units"":""斤"",""Price"":""300""},

{""id"":""3"",""Name"":""茶具"",""Code"":""1373"",""Units"":""台"",""Price"":""20000""},

{""id"":""4"",""Name"":""铁观音"",""Code"":""1374"",""Units"":""瓶"",""Price"":""400""},

{""id"":""5"",""Name"":""袋泡茶"",""Code"":""1375"",""Units"":""盒"",""Price"":""500""},

{""id"":""6"",""Name"":""茶食品"",""Code"":""1376"",""Units"":""盒"",""Price"":""400""},

{""id"":""7"",""Name"":""包装袋"",""Code"":""1377"",""Units"":""盒"",""Price"":""100""}]";

return result;

}

public bool IsReusable

{

get

{

return false;

}

}

}

}

style2.css

复制代码 代码如下:

/* ---------- 页面样式定义 ---------- */

body

{

background-color:#ffffff;

MARGIN:0px;

font-size: 10pt; /* 字体大小 */

font-family:Verdana; /* 字体名称 */

}

/* ---------- 文字链接 － 链接的普通状态 ---------- */

A:link {

color: #0000FF;

TEXT-DECORATION: none;}

/* ---------- 文字链接 － 已被访问链接 ---------- */

A:visited {

COLOR: #0000FF;

TEXT-DECORATION: none}

/* ---------- 文字链接 － 处于活动状态链接 ---------- */

A:active {

COLOR: #3333ff;

TEXT-DECORATION: none}

/* ---------- 文字链接 － 指针在链接上 ---------- */

A:hover {

COLOR: #ff0000;

text-decoration: underline;}

/* ---------- 表格样式1（普通表格） ---------- */

.tablestyle1{

font-size: 9pt; /* 表格内字体大小 */

width: 100%; /* 表格宽度 */

border: 0px none; /* 表格边框宽度 */

background-color: #0077B2; /* 表格线颜色 */

cellSpacing:expression(this.cellSpacing=1); /* 两个单元格之间的距离 */

cellPadding:expression(this.cellPadding=3); }

.TableData {

BACKGROUND: #FFFFFF;

FONT-SIZE: 10pt;

}

由于不知道怎么上传文件 所以只好把代码贴出来 请各位见谅！！！

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类