jqueryベースのダイナミック作成テーブルのプラグイン
19672 ワード
くだらないことは言わないで直接テーマに入ります.
表の機能:
1、追加
2、削除
3、取得値
4、動的にデータを埋め込む
5、動的焦点設定
6、キーボード左右の上下キーでセルの焦点をコントロールする
7、セルに正規検証機能を追加する
WebForm4.aspx
表の機能:
1、追加
2、削除
3、取得値
4、動的にデータを埋め込む
5、動的焦点設定
6、キーボード左右の上下キーでセルの焦点をコントロールする
7、セルに正規検証機能を追加する
WebForm4.aspx
<br/><script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"/>
<br/><script src="jquery-1.3.2.js" type="text/javascript"/>
<br/><script src="jquery.DynamicTable.js" type="text/javascript"/>
<br/><link href="style2.css" type="text/css" rel="Stylesheet"/>
<br/><script type="text/javascript">
<br>var rowtmplate = "<tr><td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
<br>rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
<br>rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
<br>rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
<br>rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>";
<br>rowtmplate += "<td class='TableData'><a href='#' > </a></td></tr>";
<br>$(document).ready(function() {
<br>$(this).bind('keyup', function(e) {
<br>switch (e.keyCode) {
<br>case 38: // ↑
<br>var arr = $.fn.getFocus();
<br>var rowIndex = arr[0] - 1;
<br>$.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] });
<br>$.fn.setCellsFocus();
<br>break;
<br>case 40: // ↓
<br>var arr = $.fn.getFocus();
<br>var rowIndex = arr[0] + 1;
<br>$.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] });
<br>$.fn.setCellsFocus();
<br>break;
<br>default:
<br>break;
<br>}
<br>});
<br>$('#mytbl').DynamicTable({
<br>rowCount: 3, //
<br>identity: 1, // 1
<br>arrFocus: [2, 1], //
<br>rowTmplate: rowtmplate //
<br>});
<br>$('#mytbl').BindEvent({
<br>eventName: "click",
<br>colIndex: 1,
<br>fn: alertMsg
<br>}); // click
<br>$('#mytbl').setCellsFocus(); //
<br>$('#mytbl').deleteRow(); // 6
<br>$('#mytbl').AutoFillData({ colIndex: 2, fn: getData }); //
<br>$('#mytbl').Identity({ colIndex: 1 }); //
<br>$('#mytbl').validationText({ reg: /^((\d+\.\d{2})|\d+)$/, colIndex: 5, defalutValue: 0.00 }); // ( money )
<br>});
<br>//
<br>function addRow(count) {
<br>$('#mytbl').addRow({ rowCount: count });
<br>$('#mytbl').Identity();
<br>$.fn.deleteRow();
<br>}
<br>//
<br>function getData(key) {
<br>var arr = [];
<br>arrFoucs = $.fn.getFocus();
<br>$.ajax({
<br>type: "post",
<br>async: false, //
<br>url: "getData.ashx",
<br>dataType: "json",
<br>cache: false,
<br>success: function(data) {
<br>var idx = arrFoucs[0] - 2;
<br>arr.push(data[idx].id);
<br>arr.push(data[idx].Name);
<br>arr.push(data[idx].Code);
<br>arr.push(data[idx].Units);
<br>arr.push(data[idx].Price);
<br>},
<br>Error: function(err) {
<br>alert(err);
<br>}
<br>});
<br>$.fn.setCellsFocus({ rowIndex: arrFoucs[0], colIndex: 4 });
<br>return arr;
<br>}
<br>function alertMsg() {
<br>arrFoucs = $.fn.getFocus();
<br>alert(' X：'+arrFoucs[0]+' Y：'+arrFoucs[1]+' ');
<br>}
<br></script>
<br/>
<br/>
<br/><form id="form1" runat="server">
<br/><div>
<br/><table cellpadding="0" cellspacing="0" class="tablestyle1" id="mytbl">
<br/><tr>
<br/><td class="TableData"> </td>
<br/><td class="TableData"> </td>
<br/><td class="TableData"> </td>
<br/><td class="TableData"> </td>
<br/><td class="TableData"> </td>
<br/><td class="TableData"><a href="#" onclick="addRow(5);"> 5 </a></td>
<br/></tr>
<br/></table>
<br/><input type="button" value=" " onclick="javascript:alert($.fn.getValue({}));"/>
<br/></div>
<br/></form>
<br/>
<br/>
<br/>
</code></pre>
<br/>jquery.DynamicTable.js
<br/>
<pre><code>
<br/>///<reference path="jquery-1.3.2-vsdoc2.js"/>
<br/>2
<br/>3 (function($) {
<br/>4 var rowtmplate = "";
<br/>5 var arrFocus = [];
<br/>6
<br/>7 $.fn.DynamicTable = function(options) { // ， userCp
<br/>8 var deafult = {
<br/>9 //
<br/>rowCount: 5, //
<br/>identity: 1, // 1
<br/>arrFocus: [2, 1], //
<br/>rowTmplate: "" //
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>rowtmplate = ops.rowTmplate;
<br/>arrFocus = ops.arrFocus;
<br/>$(this).addRow(ops.rowCount);
<br/>};
<br/>/* */
<br/>/*count-- */
<br/>$.fn.addRow = function(options) {
<br/>var deafult = {
<br/>rowCount: 5
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>var rowData = "";
<br/>var count = ops.rowCount;
<br/>for (var i = 1; i <= count; i++) {
<br/>rowData += rowtmplate;
<br/>}
<br/>$(this).find('tr:last-child').after(rowData);
<br/>CellsFocus();
<br/>};
<br/>/* , fn */
<br/>/*eventName-- ;colIndex-- ( 1 );fn-- */
<br/>$.fn.BindEvent = function(options) {
<br/>var deafult = {
<br/>eventName: 'click',
<br/>colIndex: 1,
<br/>fn: function() { alert(' !') }
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>eventName = ops.eventName;
<br/>colIndex = ops.colIndex;
<br/>fn = ops.fn;
<br/>$("tr:gt(0) td:nth-child(" + colIndex + ")").bind(eventName, fn);
<br/>};
<br/>/* */
<br/>/*colIndex-- ( 1 )*/
<br/>$.fn.deleteRow = function(options) {
<br/>var deafult = {
<br/>colIndex: 6
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>var colIndex = ops.colIndex;
<br/>$("tr:gt(0) td:nth-child(" + colIndex + ")").bind("click", function() {
<br/>var obj = $(this).parent(); // tr
<br/>if (confirm(' ？'))
<br/>obj.remove();
<br/>});
<br/>};
<br/>/* */
<br/>/*colIndex-- ( 1 )*/
<br/>$.fn.Identity = function(options) {
<br/>var deafult = {
<br/>colIndex: 1
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>var colIndex = ops.colIndex;
<br/>var i = 1;
<br/>$("td:nth-child(" + colIndex + ")").find('input').each(function() {
<br/>$(this).attr('value', i)
<br/>i++;
<br/>});
<br/>};
<br/>/* */
<br/>$.fn.getFocus = function() {
<br/>return arrFocus;
<br/>};
<br/>/* */
<br/>/*rowIndex-- ( 1 );colIndex-- ( 1 )*/
<br/>$.fn.setFocus = function(options) {
<br/>var deafult = {
<br/>rowIndex: 2,
<br/>colIndex: 1
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>var rowIndex = ops.rowIndex;
<br/>var colIndex = ops.colIndex;
<br/>arrFocus[0] = rowIndex;
<br/>arrFocus[1] = colIndex;
<br/>};
<br/>/* , Enter */
<br/>/*colIndex-- Enter ;fn-- */
<br/>$.fn.AutoFillData = function(options) {
<br/>colIndex = options.colIndex;
<br/>fn = options.fn;
<br/>$("td:nth-child(" + colIndex + ")").bind("keyup", function() {
<br/>var obj = $(this).parent(); // tr
<br/>$(this).find('input').each(function() {
<br/>if (event.keyCode == 13) {
<br/>var vl = $(this).val();
<br/>var arr = new Array();
<br/>arr = fn(vl);
<br/>var i = 0;
<br/>obj.find("td").each(function() {
<br/>$(this).find("input").each(function() {
<br/>$(this).attr('value', arr[i]);
<br/>i++;
<br/>});
<br/>});
<br/>}
<br/>});
<br/>});
<br/>};
<br/>/* */
<br/>/*rowIndex-- ( 1 );colIndex-- ( 1 )*/
<br/>$.fn.setCellsFocus = function(options) {
<br/>var deafult = {
<br/>rowIndex: arrFocus[0],
<br/>colIndex: arrFocus[1]
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>var rowIndex = ops.rowIndex;
<br/>var colIndex = ops.colIndex;
<br/>$("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() {
<br/>$(this).find('input').each(function() {
<br/>$(this)[0].focus();
<br/>$(this).attr('value', $(this).attr('value'));
<br/>arrFocus = [];
<br/>arrFocus.push(rowIndex);
<br/>arrFocus.push(colIndex); //
<br/>});
<br/>});
<br/>};
<br/>/* */
<br/>/*rowIndex-- ( 1 );colIndex-- ( 1 )*/
<br/>$.fn.setCellsSelect = function(options) {
<br/>var deafult = {
<br/>rowIndex: arrFocus[0],
<br/>colIndex: arrFocus[1]
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>var rowIndex = ops.rowIndex;
<br/>var colIndex = ops.colIndex;
<br/>$("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() {
<br/>$(this).find('input').each(function() {
<br/>$(this)[0].select();
<br/>});
<br/>});
<br/>};
<br/>/* */
<br/>/*reg-- ;colIndex-- ( 1 );defaultValue-- */
<br/>$.fn.validationText = function(options) {
<br/>var deafult = {
<br/>reg: /^((\d+\.\d{2})|\d+)$/,
<br/>colIndex: 2,
<br/>defaultValue: 0
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>var reg = ops.reg;
<br/>var colIndex = ops.colIndex;
<br/>var defaultValue = ops.defaultValue;
<br/>$("tr:gt(0) td:nth-child(" + colIndex + ")").each(function() {
<br/>$(this).find('input').each(function() {
<br/>//
<br/>$(this).bind('blur', function() {
<br/>var vl = $(this).attr('value');
<br/>if (!reg.test(vl))
<br/>$(this).attr('value', defaultValue);
<br/>});
<br/>});
<br/>});
<br/>};
<br/>/* */
<br/>$.fn.getValue = function(options) {
<br/>var deafult = {
<br/>rowIndex: 0, // ( 2 )
<br/>colIndex: 0 // ( 1 )
<br/>};
<br/>var ops = $.extend(deafult, options);
<br/>rowIndex = ops.rowIndex;
<br/>colIndex = ops.colIndex;
<br/>var val = "";
<br/>if (rowIndex == 0) { //
<br/>$('tr:gt(0)').each(function() {
<br/>$(this).find("td").each(function() {
<br/>$(this).find("input").each(function() {
<br/>val += $(this).attr('value') + "&";
<br/>});
<br/>});
<br/>val = val.substring(0, val.length - 1) + "|";
<br/>});
<br/>}
<br/>else {
<br/>if (colIndex == 0) { //
<br/>$('tr:nth-child(' + rowIndex + ')').each(function() {
<br/>$(this).find("td").each(function() {
<br/>$(this).find("input").each(function() {
<br/>val += $(this).attr('value') + "&";
<br/>});
<br/>});
<br/>val = val.substring(0, val.length - 1) + "|";
<br/>});
<br/>}
<br/>else { //
<br/>$("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() {
<br/>$(this).find('input').each(function() {
<br/>val += $(this).attr('value');
<br/>});
<br/>});
<br/>}
<br/>}
<br/>return val;
<br/>};
<br/>/* */
<br/>function CellsFocus() {
<br/>var colCount = $("tr:nth-child(1) td").size(); //
<br/>$("tr:gt(0) td").each(function() {
<br/>var obj = $(this);
<br/>$(this).find('input').each(function() {
<br/>$(this).bind('focus', function() {
<br/>var cellTotal = $('td').index(obj); //
<br/>arrFocus[0] = parseInt(cellTotal / colCount) + 1; //
<br/>arrFocus[1] = cellTotal % colCount + 1; //
<br/>});
<br/>});
<br/>});
<br/>};
<br/>})(jQuery);
<br/>
</code></pre>
<br/>getData.ashx
<br/>
<pre><code>
<br/>using System;
<br/>using System.Collections.Generic;
<br/>using System.Linq;
<br/>using System.Web;
<br/>using System.Web.Services;
<br/>namespace table
<br/>{
<br/>/// <summary>
<br/>/// $codebehindclassname$
<br/>/// </summary>
<br/>[WebService(Namespace = "http://tempuri.org/")]
<br/>[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
<br/>public class getData : IHttpHandler
<br/>{
<br/>public void ProcessRequest(HttpContext context)
<br/>{
<br/>context.Response.Clear();
<br/>string value = GetResult();
<br/>context.Response.Write(value);
<br/>context.Response.End();
<br/>}
<br/>private string GetResult()
<br/>{
<br/>string result = string.Empty;
<br/>result = @"
<br/>[{""id"":""1"",""Name"":"" "",""Code"":""1371"",""Units"":"" "",""Price"":""200""},
<br/>{""id"":""2"",""Name"":"" "",""Code"":""1372"",""Units"":"" "",""Price"":""300""},
<br/>{""id"":""3"",""Name"":"" "",""Code"":""1373"",""Units"":"" "",""Price"":""20000""},
<br/>{""id"":""4"",""Name"":"" "",""Code"":""1374"",""Units"":"" "",""Price"":""400""},
<br/>{""id"":""5"",""Name"":"" "",""Code"":""1375"",""Units"":"" "",""Price"":""500""},
<br/>{""id"":""6"",""Name"":"" "",""Code"":""1376"",""Units"":"" "",""Price"":""400""},
<br/>{""id"":""7"",""Name"":"" "",""Code"":""1377"",""Units"":"" "",""Price"":""100""}]";
<br/>return result;
<br/>}
<br/>public bool IsReusable
<br/>{
<br/>get
<br/>{
<br/>return false;
<br/>}
<br/>}
<br/>}
<br/>}
<br/>
</code></pre>
<br/>style2.css
<br/>
<pre><code>
<br/>/* ---------- ---------- */
<br/>body
<br/>{
<br/>background-color:#ffffff;
<br/>MARGIN:0px;
<br/>font-size: 10pt; /* */
<br/>font-family:Verdana; /* */
<br/>}
<br/>/* ---------- － ---------- */
<br/>A:link {
<br/>color: #0000FF;
<br/>TEXT-DECORATION: none;}
<br/>/* ---------- － ---------- */
<br/>A:visited {
<br/>COLOR: #0000FF;
<br/>TEXT-DECORATION: none}
<br/>/* ---------- － ---------- */
<br/>A:active {
<br/>COLOR: #3333ff;
<br/>TEXT-DECORATION: none}
<br/>/* ---------- － ---------- */
<br/>A:hover {
<br/>COLOR: #ff0000;
<br/>text-decoration: underline;}
<br/>/* ---------- 1（ ） ---------- */
<br/>.tablestyle1{
<br/>font-size: 9pt; /* */
<br/>width: 100%; /* */
<br/>border: 0px none; /* */
<br/>background-color: #0077B2; /* */
<br/>cellSpacing:expression(this.cellSpacing=1); /* */
<br/>cellPadding:expression(this.cellPadding=3); }
<br/>.TableData {
<br/>BACKGROUND: #FFFFFF;
<br/>FONT-SIZE: 10pt;
<br/>}
<br/>
</code></pre>
<br/> ！！！
<br/>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>