Javascript は動的モーダル バインディング グリッド プロセスを実装します code_javascript スキル
gridモーダルバインディング
<html>
<head>
<style type="text/css">
.grid{border:1px solid #808080; border-spacing:0; width:500px; border-collapse:collapse}
.grid th,.grid td{border:0; text-align:center;}
.grid tr{height:25px;line-height:25px;}
.grid tr.odd{background:#d0d0d0}
.grid .btn{width:80px; text-align:center}
</style>
<script type="text/javascript">
(function(){
//
var util = {
next:function next(ele){
if(ele){
var n = ele.nextSibling;
if(n && n.nodeType === 1){
return n;
}
return next(n);
}
},
parseJSON:function(str){
if(typeof JSON !== "undefined"){
return JSON.parse(str);
}
return eval("("+str+")");
},
parseArray:function(obj){
if(!obj){
return obj;
}
var result = [];
if(typeof obj.length !== "undefined"){
try{
var arr = Array.prototype.slice.call(obj,0);
result = arr;
}catch(e){
for(var i=0;i<obj.length;i++){
try{
var target = obj[i];
}catch(e){
if(obj.item){
var target = this.item(i);//nodeList
}
}
if(typeof target !== "undefined"){
result.push(target);
delete target;
}
}
}
}
return result;
},
isFunction:function(fn){
return typeof fn === "function";
},
trim:function(str){
if(typeof str !== "string"){
return str;
}
return str.replace(/^\s+|\s+$/g,"");
},
offset:function offset(ele){
var result = {top:0,left:0};
if(!ele || ele.nodeType !== 1){
return result;
}
result.top = Number(ele.offsetTop || (ele.style.top || "0").replace(/[^\d]+$/,""));
result.left = Number(ele.offsetLeft || (ele.style.left || "0").replace(/[^\d]+$/,""));
if(ele.parentNode){
var r = offset(ele.parentNode);
result.top += r.top;
result.left += r.left;
}
return result;
}
};
//事件处理
var Event = {
on:function(eventType,fn){
var element = this;
if(this.addEventListener){
this.addEventListener(eventType,fn,false);
}else if(this.attachEvent){
//将事件缓冲到该标签上,已解决this指向window(现fn内this指向element)和移除匿名事件问题
var _EventRef='_'+eventType+'EventRef';
if(!element[_EventRef]){
element[_EventRef]=[];
}
var _EventRefs=element[_EventRef];
var index;
for(index in _EventRefs){
if(_EventRefs[index]['realFn']==fn){
return;
}
}
var nestFn=function(){
fn.apply(element,arguments);
};
element[_EventRef].push({'realFn':fn,'nestFn':nestFn});
element.attachEvent('on'+eventType,nestFn);
}
},
remove:function(eventType,fn){
var element = this;
if(this.removeEventListener){
this.removeEventListener(eventType,fn,false);
}else if(this.detachEvent){
var _EventRef='_'+eventType+'EventRef';
if(!element[_EventRef]){
element[_EventRef]=[];
}
var _EventRefs=element[_EventRef]
var index;
var nestFn;
for(index in _EventRefs){
if(_EventRefs[index]['realFn']==fn){
nestFn=_EventRefs[index]['nestFn'];
if(index==_EventRefs.length-1){
element[_EventRef]=_EventRefs.slice(0,index);
}else{
element[_EventRef]=_EventRefs.slice(0,index).concat(_EventRefs.slice(index+1,_EventRefs.length-1));
}
break;
}
}
if(nestFn){
element.detachEvent('on'+eventType,nestFn);
}
}
}
};
//extend
(function(){
//删除数组中指定下标出的元素
Array.prototype.remove = function(index){
var o = this[index];
if(typeof o !== "undefined"){
if(index == 0){
this.shift();
}else if(index === this.length - 1){
this.pop();
}else{
var arr1 = this.slice(0,index);
var arr2 = this.slice(index+1);
this.length = 0;
this.concat(arr1,arr2);
}
}
}
//删除数组中所有的元素
Array.prototype.clear = function(){
this.length = 0;
}
//each
Array.prototype.each = function(fn){
if(!util.isFunction(fn)){
return;
}
for(var i=0;i<this.length;i++){
if(typeof this[i] !== "undefined"){
fn.call(this[i],i);
}
}
}
//
var collection = this.collection = function(){
this.__data = {};
this.length = 0;
}
collection.prototype = {
add:function(obj){
this.__data[this.length++] = obj;
},
get:function(index){
return this.__data[index];
},
remove:function(index){
var obj = this.__data[index];
if(typeof obj !== "undefined"){
this.length--;
}
delete this.__data[index];
},
clear:function(){
this.__data = {};
this.length = 0;
},
each:function(fn){
var index = 0;
for(var k in this.__data){
if(k && typeof this.__data[k] !== "undefined"){
fn.call(this.__data[k],index++);
}
}
},
toArray:function(){
var arr = [];
this.each(function(){
arr.push(this);
});
return arr;
}
};
})();
//
var grid = this.grid = function(table, options){
grid.prototype._init.call(this,table,options);
}
grid.prototype = {
_init:function(table, options){
if(typeof table === "undefined" || !table){
throw "table is undefined or null";
}
if(table.nodeType !== 1 || !/^table$/i.test(table.tagName)){
throw "table must be 'table' element.";
}
table.guid = ++grid.guid;
this.__cache = {};
var self = this;
var header = this.__cache["header"] = loadHeader();//header
this.__root = header.parentNode;
var templateRow = this.__cache["template"] = loadTemplate();//模板行
this.__cache["dataFormat"] = loadDataFormat();//数据模板
this.__cache["dataRows"] = new collection();//数据行
this.__cache["customCache"] = new collection();//用户缓存数据
this.__editRow = null;//当前编辑行
this.__saveContainer = createSaveButton();//保存按钮
this.__cache["commandHandles"] = {//command handels
removeRow:function(){
var rowIndex = this.getAttribute("index");
self.removeRow.apply(self,[rowIndex]);
},
newLine:function(){
self.newLine();
}
};
this.__regCommand = function(commandName,row){ //注册command
if(row){
var arg = row.getAttribute("index");
this.setAttribute("index",arg || false);
}
this.commandName = commandName;
Event.remove.call(this,"click",exec);
Event.on.call(this,"click",exec);
}
this.__removeRowCallback = function(){ //改变行的背景样式
var rows = this.__cache["dataRows"];
var customCache = this.__cache["customCache"];
var arr = rows.toArray(),dataArr=[];
var rowIndex,row,data;
rows.clear();
arr.each(function(i){
rowIndex = this.getAttribute("index");
data = customCache.get(rowIndex);
dataArr.push(data);
this.setAttribute("index",i.toString());
rows.add(this);
if( i % 2 == 1){//基数行
if(!/\sodd\s|\sodd$/g.test(this.className)){
this.className = (this.className || "") + " odd";
}
}else if(/\sodd\s|\sodd$/g.test(this.className)){
this.className = this.className.replace(/\sodd\s|\sodd$/g," ");
}
i++;
});
customCache.clear();
dataArr.each(function(){
customCache.add(this);
});
}
//事件处理
options = options || {};
this.onDataBinding = options.onDataBinding || this.onDataBinding;
this.onRowBinding = options.onRowBinding || this.onRowBinding;
this.onRowBinded = options.onRowBinded || this.onRowBinded;
function loadHeader(){
var tr = table.firstChild;
if(tr && tr.nodeType != 1){
tr = util.next(tr);
}
if(!/tr/i.test(tr.tagName)){ //如果第一个元素不是tr，则浏览器支持tbody
tr = tr.firstChild;
if(tr.nodeType != 1){
tr = util.next(tr);
}
}
return tr;
}
function loadTemplate(){
tr = util.next(header);//获取模板行
return tr;
}
function loadDataFormat(){
var nodes = templateRow.childNodes,ele,data,result = {},attr;
nodes = util.parseArray(nodes);
nodes.each(function(i){
ele = this;
if(ele && ele.nodeType == 1){
attr = ele.data || ele.getAttribute("data");
if(attr){
data = util.parseJSON(attr);
ele.field = data.field;
result[ele.field] = data;
}
}
});
return result;
}
function createSaveButton(){
var div = document.createElement("div");
div.style.position = "absolute";
div.style.display = "none";
div.style.width = "auto";
var btn = document.createElement("button");
btn.innerHTML = btn.innerText = btn.textContent = btn.value = "Save";
try{
btn.type = "button";
}catch(e){
btn.setAttribute("type","button");
}
div.appendChild(btn);
var btnCancel = document.createElement("button");
btnCancel.innerHTML = btnCancel.innerText = btnCancel.textContent = btnCancel.value = "Cancel";
try{
btnCancel.type = "button";
}catch(e){
btnCancel.setAttribute("type","button");
}
div.appendChild(btnCancel);
document.body.appendChild(div);
Event.on.call(btn,"click",function(){
self.save();
});
Event.on.call(btnCancel,"click",function(){
div.style.display = "none";
if(self.__editRow){
self.__editRow.parentNode.removeChild(self.__editRow);
self.__editRow = null;
}
});
return div;
}
function exec(){
if(self.__editRow){//如果当前处于编辑模式，则禁用所有command
return;
}
var commandName = this.commandName;
var handler = self.__cache["commandHandles"][commandName];
if(handler){
handler.call(this);
}
}
//去除模板行
templateRow.parentNode.removeChild(templateRow);
//处理表格中的command事件
var elements = header.getElementsByTagName("*");
elements = util.parseArray(elements);
elements.each(function(){
if(this.nodeType === 1){
var commandName = this.command || this.getAttribute("command");
if(commandName){
self.__regCommand.call(this,commandName,header);
}
}
});
},
//bangding
bind:function(data){
this.clear();
if(data && data.length > 0){
var self = this;
data.each(function(){
self.append(this);
});
}
},
//清理表，删除所以除header以外的数据行
clear:function(){
var rows = this.__cache["dataRows"],row;
rows.each(function(){
row = this;
if(row){
row.parentNode.removeChild(row);
}
});
rows.clear();//清理rows
},
//删除指定的行
removeRow:function(rowIndex){
var rows = this.__cache["dataRows"];
var row = rows.get(rowIndex);
if(row){
var data = this.__cache["customCache"][rowIndex];
row.parentNode.removeChild(row);
rows.remove(rowIndex);
//通知用户数据行被移除
if(util.isFunction(this.onRowRemoved)){
this.onRowRemoved(data,row);
}
}
this.__removeRowCallback();
},
//添加 行
append:function(data){
if(!data){
return ;
}
var template = this.__cache["template"];
var rows = this.__cache["dataRows"];
var rowIndex = rows.length;
var tr = template.cloneNode();
var customCache = this.__cache["customCache"];
customCache.add(data);
//将数据行添加到table
this.__root.appendChild(tr);
var self = this;
var td,//数据单元格
dataFormat,//数据格式化器
value;//单元格中的给定的数据
tr.setAttribute("index",rowIndex.toString());
//更改样式
if(rowIndex % 2 == 1){
tr.className = (tr.className || "") + " odd";
}
//通知 行数据绑定开始
if(util.isFunction(this.onRowBinding)){
this.onRowBinding(rowIndex,tr);
}
var templateTD = template.firstChild;
while(templateTD){
td = templateTD.cloneNode(true);
tr.appendChild(td);
if(td.nodeType == 1 && templateTD.field){
dataFormat = this.__cache["dataFormat"][templateTD.field];
td.removeAttribute("data");
td.field = templateTD.field;
value = data[dataFormat.field];
//通知单元格数据绑定事件
value = this.onDataBinding(dataFormat.field,value,td,data);
if(value !== false){//如果返回false，则不用做赋值操作
switch(dataFormat.render){
case "innerHTML":
td.innerHTML = typeof value == "undefined" || value == null ? "" : value;
break;
case "innerText":
default:
td.innerText = td.textContent = typeof value == "undefined" || value == null ? "" : value;
break;
}
}
}
templateTD = templateTD.nextSibling;
}
rows.add(tr);
//处理command
var elements = tr.getElementsByTagName("*"),ele,attr;
elements = util.parseArray(elements);
elements.each(function(){
ele = this;
if(ele.nodeType == 1 && (ele.command || ele.getAttribute("command"))){
attr = ele.command || ele.getAttribute("command");
self.__regCommand.call(ele,attr,tr);
}
});
//通知 行数据绑定完成
if(util.isFunction(this.onRowBinded)){
this.onRowBinded(rowIndex,tr);
}
},
//手动产生新的输入行
newLine:function(){
if(this.__editRow){//如果当前有存在编辑行，则直接返回，每次最多限制编辑一行数据
return;
}
var template = this.__cache["template"] ;
var row = this.__editRow = template.cloneNode(false);
var templateTD = template.firstChild;
var textareaList = [];
while(templateTD){
td = templateTD.cloneNode(true);
row.appendChild(td);
if(td.nodeType == 1){
if(templateTD.field){
td.field = templateTD.field;
td.innerHTML = "";
var dataFormat = this.__cache["dataFormat"][templateTD.field];
var textarea = null;
if(dataFormat.render == "innerHTML"){
textarea = document.createElement("textarea");
}else{
textarea = document.createElement("input");
textarea.type = "text";
}
textarea.style.display = "none";
td.appendChild(textarea);
textareaList.push(textarea);
}
}
templateTD = templateTD.nextSibling;
}
//将数据行添加到table
this.__root.appendChild(row);
var height = row.offsetHeight,
width = row.offsetWidth,
offset = util.offset(row);
textareaList.each(function(){
this.style.height = (0.8 * height) + "px";
this.style.width = (0.8 * this.parentNode.offsetWidth) + "px";
this.style.display = "";
});
var left = offset.left + width + 5;
var top = offset.top;
this.__saveContainer.style.top = top + "px";
this.__saveContainer.style.left = left + "px";
this.__saveContainer.style.height = this.__saveContainer.style.lineHeight = height + "px";
this.__saveContainer.style.display = "block";
},
//保存手动产生的数据行数据
save:function(){
if(!this.__editRow){
return;
}
var row = this.__editRow;
var td = row.firstChild;
var data = {};
while(td){
if(td.nodeType === 1 && td.field){
var dataFormat = this.__cache["dataFormat"][td.field];
var textarea = null;
if(dataFormat.render == "innerHTML"){
textarea = td.getElementsByTagName("textarea")[0];
}else{
textarea = td.getElementsByTagName("input")[0];
}
value = textarea.value;
switch(dataFormat.dataType){
case "number":
value = util.trim(value);
value = Number(value.length == 0 ? 0 : value);
break;
default:
break;
}
data[td.field] = value;
}
td = td.nextSibling;
}
this.__editRow.parentNode.removeChild(this.__editRow);
this.__editRow = null;
this.__saveContainer.style.display = "none";
//通知用户正在保存数据
if(util.isFunction(this.onSaving)){
this.onSaving(data);
}
this.append(data);
},
getRowData:function(rowIndex){
return this.__cache["customCache"].get(rowIndex);
},
//数据绑定到指定cell时的事件
onDataBinding:function(field,value,cell,data){
return value;
},
//当数据行绑定开始时的事件
onRowBinding:function(rowIndex, row){
},
//当数据行绑定完成时的事件
//@param row {DOM element tr}
onRowBinded:function(rowIndex, row){
},
//当编辑的数据被保存时的事件
onSaving:function(data){
},
//当数据行被移除时的通知事件
onRowRemoved:function(data,row){
}
};
grid.guid = 0;
})();
</script>
</head>
<body>
<table id="table_demo" class="grid">
<tr class="odd">
<th>ID</th>
<th>Name</th>
<th>Descpription</th>
<th><button type="button" command="newLine" class="btn">New Line</button></th>
</tr>
<tr>
<td data='{"field":"id","dataType":"number","render":"innerText"}'>1</td>
<td data='{"field":"name","dataType":"string","render":"innerText"}'>WorkingService</td>
<td data='{"field":"description","dataType":"string","render":"innerHTML"}'>WorkingService</td>
<td>
<button type="button" command="removeRow" class="btn">Delete</button>
</td>
</tr>
</table>
<script type="text/javascript">
var table = document.getElementById("table_demo");
var g = new grid(table,{
onDataBinding:function(field,value){
return value;
},
onRowBinded:function(rowIndex,row){}
});
g.bind([
{id:0,name:"kilin"},
{id:1,name:"kilin1"},
{id:2,name:"kilin2"},
{id:3,name:"kilin3"}
]);
</script>
</body>
</html>
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AMPythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AMPythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AMC/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AMさまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前ByDDD
Will R.E.P.O.クロスプレイがありますか？
1 か月前By尊渡假赌尊渡假赌尊渡假赌
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
メモ帳++7.3.1
使いやすく無料のコードエディター
WebStorm Mac版
便利なJavaScript開発ツール
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
