1. 程式人生 > >easyui datagrid columns的field支援屬性的子屬性(field.sonfield形式或者格式化程式形式)

easyui datagrid columns的field支援屬性的子屬性(field.sonfield形式或者格式化程式形式)

所謂為了支援某屬性的子屬性,主要為了解決。在伺服器返回的json格式的資料的某個屬性帶有自屬性,而我們恰恰又需要使用到該子屬性作為我們的datagrid的某個欄位的。預設情況下datagrid只能支援一級屬性欄位(屬性的屬性欄位屬於二級欄位)。

對於這個問題的解決方案有兩種方式

1、就是更改esayui原始檔,是其支援field.sonfield的形式。

javascript語法為我們提供了兩種方式獲取一個物件的屬性:點字元連線和[]方式。使用[]可以很方便的將一個屬性通過字串的方式獲取。但是javascript並沒有提供點連線的字串屬性訪問方式,例如:

Js程式碼 
  1. var person={name:{first:
    "lily",last:"wang"},  
  2. addr:{addr1:"beijing",addr2:"zhongguo"}};  
  3. alert(person.name.first);  
  4. alert(person['name']['first']);    
  5. alert(person['name.first']);//不支援

 可以採用下面方式根據點連線的字串獲取物件屬性值的屬性值。

Js程式碼 
  1. var str='name.first';  
  2. var test=eval("person['"+str.replace(/\./g,"']['")+"']");  
  3. alert(test);  

而 easyui datagrid的coloumns的屬性定義方式:

Js程式碼 
  1. {title:'姓名',field:'name',width:60},  
  2. {title:'聯絡方式',field:'phone',width:100},  

 它的field不支援點字元連線的字串模式

Js程式碼 
  1. {title:'姓名',field:'person.name',width:60},  
  2. {title:'聯絡方式',field:'person.phone',width:100},  

 而實際通過ajax從伺服器獲得的json往往需要使用點連線符的字串獲取屬性值。

修改jquery.easyui.min.js中第8670行:

Js程式碼 
  1. //var _644=_641[_643];//可能解決問題
  2. var _644=eval("_641['"+_643.replace(/\./g,"']['")+"']");

 這樣就可以很好的支援person.name格式的field了

備註一下:我用額esayui是1.3.3版本的。免得大夥找半天找不到對應的地方

第二種方案就是採用formatter格式化方法來實現

例如:伺服器返回的資料是

Js程式碼 
  1. [{"id":{"tagId":"A0001","timeCs":{"time":1371657600000}},"readerIds":"jing;isnig;sning"}]

而應用過程中需要使用到id屬性下的tagId子屬性。我們可以將field的屬性直接賦值為id屬性,而後通過轉換函式來實現。

示例如下:

Js程式碼 
  1. columns:[[  
  2.             {field:'id',title:'卡號',width:20,formatter: function(value,row,index){
  3.           if (value.tagId){
  4.            return value.tagId;
  5.           } else {
  6.            return value;
  7.           }
  8.          }},  
  9.            {field:'id',title:'時間',width:20,formatter: function(value,row,index){
  10.           return new Date(value);
  11.           }}
  12. ]]

有個問題需要補充一下:上面的兩個field為id的這種情況是通不過的。對於要展示同一個屬性欄位下的兩個子屬性建議採用第一種方案解決。或者兩種結合的方式解決。