EasyUI Datagrid 表格內容為超連結時的編輯問題

之前在測試 EasyUI 的 Datagrid 時發現, 若表格內容含有超連結, 這時使用 EasyUI Dialog 對話框編輯表格內容時會有一個問題, 就是呼叫 load 方法將所點選的列 (row) 內容載入表單中時, 含有超連結的欄位會載入超連結內容, 但實際上我們要編輯的只是超連結的 innerText 而已. 當時認為這很難處理, 所以就得到一個印象 : 表格內容盡量不要含有超連結, 除非它不需要編輯.

昨晚在替 PHP 專案新增一個 cron_list 資料表來管理 cron jobs 時, 又遇到這個問題. 因為我想在 cron_list 表格中可以直接按程式名稱的超連結就開啟新視窗去執行該 cron job, 但在編輯 cron 程式的說明欄位時, 由於程式名稱是超連結, 結果載入編輯欄位的就是那個超連結內容, 感覺很奇怪, 我要的是純粹的程式名稱而已.

經過來回測試各種方法後, 終於搞定這個長久以來未解決的麻煩. 其實方法很簡單, 就只是 Javascript 的字串處理而已. 處理方式如下 :

    $("#edit_cron").bind("click",function(){
      var row=$("#cron_list").datagrid("getSelected");
      if (row) {
        var str=row.program_name; //去除超連結用, 只取出程式名稱
        if (str.indexOf("<") != -1) { //避免第二次編輯時變空白, 只有第一次時才須擷取
          row.program_name=str.substring(str.indexOf(">")+1,str.lastIndexOf("<"));
          }
        $("#cron_list_dialog").dialog("open").dialog("setTitle","編輯 Cron 說明");
        $("#cron_list_form").form("load",row);
        $("#op").val("update_cron");
        $("#id").val(row.id); //edit 需要傳送 id
        }
      else {$.messager.alert("訊息","請選擇要編輯的 Cron 項目!","info");}
      });

與一般無超連結表格編輯方式不同之處就是加入了上面藍色部分的程式碼, 當第一次選取列進行編輯時, 所取得的 row.progrma_name 屬性值是超連結內容, 例如 :

<a href='http://www.myweb.com/cron/test.php' target='_blank'>test.php</a>

我要的只是其中 innerText 的 test.php 而已, 使用 Javascript 的 substring() 即可輕易取出超連結內的程式名稱, 先用 indexOf() 找出第一個大於符號索引, 加 1 就是 php 程式名稱的開始位置; 然後用 lastIndexOf() 從後面尋找第一個小於符號索引, substring() 會擷取此索引之前的字元. 哈哈哈, 總算搞定了, 這樣以後要處理含有超連結的表格就不會綁手綁腳了.

之前一直不願面對處理的難題竟然只要三行程式碼就解決了, 因為這次我既要在表格中使用超連結, 也要能編輯表格內容, 之前遇到阻礙就不想花時間去試, 這回被逼到了不得不面對. 可見, 障礙的高度通常不在問題的本身,  而是在我們心裡自己築起來的那道高牆.

參考 :

# Get selected row from DataGrid