Plug-in for dynamically creating tables based on jquery_jquery

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

序号

产品名称

产品代码

单位

单价

添加5行

///
2
3 (function($) {
4 var rowtmplate = " ";
5 var arrFocus = [];
6
7 $.fn.DynamicTable = function(options) { //Define the name of the plug-in, here is userCp
8 var deafult = {
9 //The following are the properties of the plug-in and their default values
rowCount: 5, //Add the number of rows
identity: 1, //The first column is automatically numbered
arrFocus: [2, 1 ], //The first cell is set as focus
rowTmplate: "" //Row template
};
var ops = $.extend(deafult, options);
rowtmplate = ops. rowTmplate;
arrFocus = ops.arrFocus;
$(this).addRow(ops.rowCount);
};
/*Add multiple rows after the last row of the table through the row template*/
/*count--Add row 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();
};
/*Dynamic Bind an event to a column, and execute the fn function when the event is triggered*/
/*eventName--event name; colIndex--column index (starting from 1); fn--trigger function*/
$. fn.BindEvent = function(options) {
var deafult = {
eventName: 'click',
colIndex: 1,
fn: function() { alert('You clicked this unit Grid!') }
};
var ops = $.extend(deafult, options);
eventName = ops.eventName;
colIndex = ops.colIndex;
fn = ops. fn;
$("tr:gt(0) td:nth-child(" colIndex ")").bind(eventName, fn);
};
/*Bind order to a certain column Click delete event*/
/*colIndex--column index (starting from 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(); //Get the tr child node object
if (confirm('Are you sure you want to delete it?'))
obj.remove();
});
};
/*Automatically fill in the serial number for the specified column*/
/*colIndex--column index (starting from 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 ;
});
};
/*Get focus cell coordinates*/
$.fn .getFocus = function() {
return arrFocus;
};
/*Set focus cell coordinates*/
/*rowIndex--row index (starting from 1); colIndex--column Index (starting from 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;
};
/*When data is entered into a cell, after pressing the Enter key, the data is automatically retrieved from the background and filled in the corresponding column of the row according to the entered value*/
/*colIndex-- In which column of input data, press the Enter key to trigger the event; fn--callback function with parameters*/
$.fn.AutoFillData = function(options) {
colIndex = options.colIndex;
fn = options .fn;
$("td:nth-child(" colIndex ")").bind("keyup", function() {
var obj = $(this).parent(); //Get tr child node object
$(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 ;
} );
});
}
});
});
};
/*Set a cell as focus*/
/*rowIndex- -Row index (starting from 1);colIndex--column index (starting from 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); //Update focus array value
});
});
};
/*Set the text value of a certain cell to the selected state*/
/*rowIndex--row index (starting from 1); colIndex--column index (starting from 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();
} );
});
};
/*Add validation function to a certain cell*/
/*reg--regular expression;colIndex--column index (starting from 1); defaultValue--The default value assigned to the cell if validation fails*/
$.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() {
//Verification
$(this).bind('blur', function() {
var vl = $(this).attr('value');
if (!reg.test(vl))
$(this).attr('value', defaultValue);
});
});
});
};
/*Get the value in the table*/
$.fn.getValue = function(options) {
var deafult = {
rowIndex: 0, //Row coordinates (starting from 2)
colIndex: 0 //Column coordinates (starting from 1)
};
var ops = $.extend(deafult, options);
rowIndex = ops.rowIndex;
colIndex = ops.colIndex;
var val = "";
if (rowIndex == 0) { //Get data for all rows
$(' 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) { //Get a row of data
$('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 { //Get the value of a cell
$("tr:nth-child(" rowIndex ") td:nth-child(" colIndex ")").each(function() {
$(this).find('input').each(function() {
val = $(this ).attr('value');
});
});
}
}
return val;
};
/*Update focus coordinates after a cell gets focus*/
function CellsFocus() {
var colCount = $("tr:nth-child(1) td").size() ; //Get how many cells there are in each row
$("tr:gt(0) td").each(function() {
var obj = $(this);
$(this ).find('input').each(function() {
$(this).bind('focus', function() {
var cellTotal = $('td').index(obj) ; //Get the index of a certain cell
arrFocus[0] = parseInt(cellTotal / colCount) 1; //Which row
arrFocus[1] = cellTotal % colCount 1; //Which column
});
});
});
};
})(jQuery);

using System;
using System.Collections.Generic;
using System.Linq ;
using System.Web;
using System.Web.Services;
namespace table
{
///

/// Summary description of $codebehindclassname$
///

[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"":""Green Tea"",""Code"":""1371"",""Units"":""jin"", ""Price"":""200""},
{""id"":""2"",""Name"":""Black Tea"",""Code"":""1372 "",""Units"":""jin"",""Price"":""300""},
{""id"":""3"",""Name"": ""Tea Set"",""Code"":""1373"",""Units"":""台"",""Price"":""20000""},
{""id "":""4"",""Name"":""Tieguanyin"",""Code"":""1374"",""Units"":""Bottle"",""Price" ":""400""},
{""id"":""5"",""Name"":""tea bag"",""Code"":""1375"" ,""Units"":""Box"",""Price"":""500""},
{""id"":""6"",""Name"":"" Tea Food"",""Code"":""1376"",""Units"":""Box"",""Price"":""400""},
{""id" ":""7"",""Name"":""Packaging bag"",""Code"":""1377"",""Units"":""Box"",""Price"" :""100""}]";
return result;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}

/* ---------- Page style definition---------- */
body
{
background- color:#ffffff;
MARGIN:0px;
font-size: 10pt; /* font size*/
font-family:Verdana; /* font name*/
}
/ * ---------- Text link - the normal state of the link ---------- */
A:link {
color: #0000FF;
TEXT- DECORATION: none;}
/* ---------- Text link - visited link ---------- */
A:visited {
COLOR : #0000FF;
TEXT-DECORATION: none}
/* ---------- Text link - active link ---------- */
A:active {
COLOR: #3333ff;
TEXT-DECORATION: none}
/* ---------- Text link - the pointer is on the link ------- --- */
A:hover {
COLOR: #ff0000;
text-decoration: underline;}
/* ---------- Table style 1 (normal Table) ---------- */
.tablestyle1{
font-size: 9pt; /* Font size in the table*/
width: 100%; /* Table width* /
border: 0px none; /* Table border width*/
background-color: #0077B2; /* Table line color*/
cellSpacing:expression(this.cellSpacing=1); /* Two The distance between cells*/
cellPadding:expression(this.cellPadding=3); }
.TableData {
BACKGROUND: #FFFFFF;
FONT-SIZE: 10pt;
}