jQuery大神幫你做後台 - 放資料篇 | 苦命工程師的載沉載浮 - 點部落

2011-01-07

jQuery大神幫你做後台 - 放資料篇

6102
0
jQuery

jQuery大神幫你做後台 - 放資料篇

我們在開發後台網站的時候

基本上就是針對每張表格

做編輯功能給使用者操作

但其實每頁功能都大同小異

我們卻要麻煩的要死的寫這樣的程式碼


public void DetailData(int itemId)
{
      Student stu = new Student(itemId);
      txtName.Text = stu.Name;
      txtAge.Text = stu.Age.ToString();
}

坦白說, 每頁都這樣寫會搞死人

而且做的事情根本都一樣, 幹麻用這麼麻煩的事情

而且放個資料還要AutoPostBack, 我個人覺得不是很符合效能啦 = =

後來改用AJAX跟PageMethod要資料

我假如要Maintain某筆資料

用AJAX跟PageMethod要了Student的實體回來, 大致上長這樣


{
      Name : 'John',
      Age : 13,
      Phone : '7997979979'
};

假如說我的維護頁面長這樣


<input type='text' id='txtName' />
<input type='text' id='txtAge' />
<input type='text' id='txtPhone' />





假如說格式都一樣, 欄位的id就是屬性名稱加上txt,  有沒有比較優雅的方式放資料?

我們可以拜請jQuery大神, 例如說用這個我已經寫好的UI


$.writeDom = function (container, obj) {
    if (!obj) return;
    var $container = $(container);

    $container.find(':text,textarea').each(function () {
        var $this = $(this); 
        var id = $this.attr('id');
        if (!id || id.length < 4) return;
        id = id.substr(3);  //習慣TextBox的ID都叫做 txt{AttrName}
		
        if (obj[id] && obj[id]) {
            $this.val(obj[id]);
        }
    });

    $container.find('select').each(function () {
        var $this = $(this);
        var id = $this.attr('id');
        if (!id || id.length < 4) return;
        id = id.substr(3);  //習慣Select的ID都叫做 ddl{AttrName}
        if (obj[id])
            $this.find('option[value=' + obj[id] + ']').attr('selected', true);
    });

    $container.find(':radio').each(function () {
        var $this = $(this); //習慣Radio的ID都叫做 rbl{AttrName}
        if ($this.not('[done=true]')) {
            var id = $this.attr('name');
            var $radios;
            if (id && id.length > 0) {
                $radios = $container.find('[name=' + id + ']');
            }
            else {
                $radios = $this;
                id = $this.attr('id');
            }
            if (id && id.length > 4) {
                id = id.substr(3);
            }
            $radios.filter('[value=' + obj[id] + ']').attr('checked', true);
            $radios.attr('done', true);
        }
    }).removeAttr('done');
};

接著就可以在success的地方呼叫 $writeDom('#editArea', obj);

jQuery就會自動用#editArea (要放詳細資料的一個區域, 例如是在dialog裡面的div, 或著一個form)

去把裡面的input給撈出來, 用他們的Id去找尋obj裡面是否有這個屬性

有的話就把值寫進去

也就是說, 只要命名規則定好 (物件屬性 –> HTML的INPUT欄位ID)

可以每一頁都呼叫這支jQuery UI, 讓他自動幫忙放資料

在配合AJAX跟PageMethod, 可以讓後台放資料的程式碼精簡到不行

附註: 上方的範例是我for自己的習慣寫的UI, 其實規則很簡單, 也可以嘗試自己幫自己的專案寫一個UI

假如我寫的有什麼不正確的地方也請指正感激 <(_ _)>

(我是用INPUT的ID去反查obj的ATTR, 當然也可以用OBJ的ATTR去查有沒有對應的INPUT,

反正jQuery是神, 吃的也是Client端的記憶體 OK的)

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

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

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

回首頁