jQuery大神幫你做後台 - 清除篇

jQuery大神幫你做後台 - 清除篇

本來不想發這篇

覺得有騙文章的嫌疑

 

雖然說每篇都有騙文章的感覺啦 orz

 

 

不過想一想還是加上這篇比較完整

 

 

我們可以藉由命名規則的建立  Table Column Name–> Entity Attr Name –> Input Id

只要這三個有一定的規則

 

在寫後台網頁的時候

就可以用jQuery配合PageMethod自動的放資料的頁面上

 

把修改過後的頁面資料組合成object送回Server端

以及自動檢查必填, 是否為數字,  等驗證項目

 

 

基本上這些功能在後台網頁中幾乎大部分基本資料的建立都會用到

也可以用同一支程式去跑所有頁面

 

 

那剩下的就只剩下修改完畢之後重置編輯區,  讓使用者可以新增或修改下一筆資料

其實這件事情也可以透過jQuery用很簡單的方法完成

 

說穿了其實也不稀奇

而且相信已經很多人都這樣寫了

 


    var $container = $(container);
	$container.find(':text,textarea').val('');
	$container.find('input[type=hidden]').val(0);
	$container.find('select option:first-child').attr('selected', true);
	$container.find(':radio:checked').attr('checked', false);
	
	//$container.removeData('itemId'); //我習慣把該物件的PK存在data裡面, 可依照需求更改
};

$.clearArea('#editArea'); 

 

類似這樣的function, 可以很輕鬆的把頁面區重置

而且最重要的是這支程式可以重複利用

 

每一頁都可以用到

 

=====================================================

可能有人會好奇,  每一頁要編輯的內容都不一樣

 

怎麼可能用同一支程式去完成全部的重置動作

 

 

當然最簡單的解法是在clearArea()呼叫完之後再做自己想要的重置動作

 

但是我們也可以選擇用回乎函數在同一支程式裡面跑完所有動作

 

 

簡單解釋,  js可以用很簡單的方式把function當成一個參數去傳遞

 

而js的型別可以允許程式在任何位置直接修改該類別的屬性

 

因此我們結合這些概念,  可以把clearArea加入一個設定檔進去

 

 

修改成


    var $container = $(container);
	$container.find(':text,textarea').val('');
	$container.find('input[type=hidden]').val(0);
	$container.find('select option:first-child').attr('selected', true);
	$container.find(':radio:checked').attr('checked', false);
	//$container.removeData('itemId'); //我習慣把該物件的PK存在data裡面, 可依照需求更改
	
	if (option) {
		if (option.otherMethod && typeof option.otherMethod == 'function')
		   option.otherMethod();
	}
};

$.clearArea('#editArea', { 
	otherMethod: function () {
		//doSomeThing
	}
});

 

差別就在於, 在method裡面預先留了一個空間,  假如使用者有傳otherMethod進來 就執行他

沒有當然就跟原本一樣

 

而呼叫的時候可以就可以選擇要不要加

 

 

另外用了一個概念是option

 

option有點設定黨的感覺,  但是它是一個object

也就是說它可以有任意數量的屬性

 

之後假如要回來修改程式加其他的option進去, 也不需要再額外增加參數的數量

直接在option上做修改就好

 

這邊講得有點模糊

 

又或著為什麼用$.[method]這樣去加入新程式到jQuery裡面

而不用$.fn.[method]這樣註冊進去

 

其實依照需求都可以,  只是用$.fn.[method]這樣註冊的方法要守的規則比較多

例如說需要把jQuery給return回去讓其他程式串接之類的

 

之後假如有機會可以在分享一下很拙劣的寫ui心得  orz

 

裡面在想辦法整理一下對於option的想法請前輩指證了

 

--

本文可能有理解錯誤  或不盡不實的地方

請路過的前輩不要客氣  用力打醒

這會是我們成長的主要養分