1. 程式人生 > >EasyUI中使用datagrid元件的insertRow方法進行前端插入JSON資料問題

EasyUI中使用datagrid元件的insertRow方法進行前端插入JSON資料問題

在專案研發過程中,現場運維提出一個需求,能通過編寫json檔案的形式動態插入datagrid表格中幾條模擬資料;

前提是頁面已經從後臺通過介面形式渲染好了表格,渲染成功後再通過ajax呼叫json資料形式往表格插入資料;

$("#id-searchInfo").datagrid({
     url: "/tech/trial/getCurrentOrTodayTrialInfo",
     checkOnSelect: false,
     singleSelect: true,
     selectOnCheck: false,
     striped: true,
     rownumbers: true,
 })

以上方法通過介面讀取資料庫真實資料;
在onLoadSuccess屬性後加回撥函式

 $.ajax({
     url: "trialCourt.json",
     type: "get",
     async: false,
     success: function (data) {
         $('#id-searchInfo').datagrid('insertRow', {
             index: data.insertLineNumber * 1,	// 索引從0開始
             row: data.rows[i]
         })
      }
 })

到這一部都沒有任何問題,本以為小小需求已然解決,可遇到接下來的問題
在點選表格的點選事件時,通過formatter拼寫的點選事件獲取回撥引數index出現問題

{
    field: 'detail', title: '詳情', width: '8%', align: 'center', formatter: function (value, row, index) {
   if (row.videos.length > 0) {
        return '<a href="#" style="text-decoration: none; color:#fff;" onclick="loadClick('+index+')">點選檢視</a>'
   } else {
        return '<a href="#" style="text-decoration: none; color:#fff;">不可檢視</a>'
    }
}

問題描述:通過介面獲取資料時,datagrid渲染完成,在通過insertRow方法插入的資料預設index下標又從0開始。由此知道通過index來判斷點選的是那條資料已經不準確,於是

$('#id-searchInfo').datagrid("getSelected");

則通過獲取點選選中本行row資料來實現點選一行資料的操作。

方法比較笨,如有妙招請不吝賜教。歡迎留言探討。