用 jQuery EasyUI 打造輕量級 CMS (七)

今天繼續寫系統設定表單管理, 發現欄位 system_state 與 auth_policy 所用的 radio 元件切換選項後卻無法取出選取的資料.

在 sys.php 的 case 'admin' 中這兩個圓鈕我是這樣寫 :
       
       //製作系統狀態 radio 群組
       $radio="<input type='radio' name='system_state' "; //共同部分
       if ($system_state=="active") { 
         $system_state_radio=$radio." value='active' checked>工作中 ".
                             $radio." value='inactive'>維護中"; 
         } //end of if
       else { 
         $system_state_radio=$radio." value='active'>工作中 ".
                             $radio." value='inactive' checked>維護中";
         } //end of else
       //製作使用者認證政策 radio 群組
       $radio="<input type='radio' name='auth_policy' "; //共同部分
       if ($auth_policy=="normal") { 
         $auth_policy_radio=$radio." value='normal' checked>普通 ".
                            $radio." value='strict'>嚴格"; 
         } //end of if
       else { 
         $auth_policy_radio=$radio." value='normal'>普通 ".
                            $radio." value='strict' checked>嚴格";
         } //end of else

然後寫到 PHP 的長字串中 :

        <td style="width:50%;padding:3px;">
          <label style="width:100px;display:inline-block;">系統運行狀態 : </label>
          {$system_state_radio}
        </td>

        <td style="width:50%;padding:3px;">
          <label style="width:100px;display:inline-block;">使用者認證政策 : </label>
          {$auth_policy_radio}
        </td>

這個設定表單會回傳給 home.php 的管理標籤的 href 顯示 :

  <div class="tab" title="管理">
    <div id="sys_settings" class="easyui-panel" title="系統設定" style="width:100%;padding:5px" data-options="href:'sys.php?op=admin',tools:'#settings-tools'">
    </div>
    <div id="settings-tools">
      <a href="#" id="reload-settings" class="icon-reload" title="重新載入"></a>
      <a href="#" id="save-settings" class="icon-save" title="儲存"></a>
    </div>
  </div>

按下 save-settings 按鈕圖示時, 就將表單內容以 Ajax 方式傳給 sys.php 的 case 'update_sys_settings' 區段更新 sys_settings 資料表 :

      $("#save-settings").bind("click",function(){
        var params={
          op:"update_sys_settings",
          site_title:$("[name=site_title]").val(),
          sys_theme:$("[name=sys_theme]").val(),
          system_state:$("[name=system_state]").val(),
          auth_policy:$("[name=auth_policy]").val(),
          min_password_length:$("[name=min_password_length]").val(),
          password_type:$("[name=password_type]").val()
          };
        alert($.param(params));
        var callback=function(data,textStatus){
          if (data.status==="success"){
            $.messager.alert("訊息","系統設定更新成功!");
            }
          else {$.messager.alert("訊息","系統設定更新失敗!");}
          }
        $.post("sys.php",params,callback,"json");
        });

後端 sys.php 處理區塊為 :

  case "update_sys_settings" : {
       $data_array["sys_theme"]=$_REQUEST["sys_theme"];
       $data_array["site_title"]=$_REQUEST["site_title"];
       $data_array["system_state"]=$_REQUEST["system_state"];
       $data_array["auth_policy"]=$_REQUEST["auth_policy"];
       $data_array["min_password_length"]=
          $_REQUEST["min_password_length"];
       $data_array["password_type"]=$_REQUEST["password_type"];
       $result=update_all("sys_settings", $data_array);
       if ($result===TRUE) {$status="success";}
       else {$status="failure";}
       $arr["status"]=$status;
       echo json_encode($arr);
       break;
       }    

問題來了, 這兩個單選圓鈕傳不出去選定的值, 一直都固定傳出 normal 與 active :

左看右看就是沒問題啊, 怎會擷取不到選定值呢? 用 select 拉霸都正常.

註 : 原因找到了, radio 不能只用 [name=system_state] 來選取, 因為它一組有兩個 radio, 必須再加上 :checked 來過濾才行 :

          system_state:$("[name=system_state]:checked").val(),
          auth_policy:$("[name=auth_policy]:checked").val(),

這樣就會取得選取的那個 radio 了. 其實不用這麼麻煩自行將欄位值製作成 params 物件, 直接使用 jQuery 為 form 提供的 serialize() 函數就可以了 :

      $("#save-settings").bind("click",function(){
        var params=$("#sys-settings-form").serialize();
        params="op=update_sys_settings&" + params;
        var callback=function(data,textStatus){
          if (data.status==="success"){
            $.messager.alert("訊息","系統設定更新成功!");
            }
          else {$.messager.alert("訊息","系統設定更新失敗!");}
          }
        $.post("sys.php",params,callback,"json");
        });