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的想法請前輩指證了
--
本文可能有理解錯誤 或不盡不實的地方
請路過的前輩不要客氣 用力打醒
這會是我們成長的主要養分