easyui之datagrid動態修改列
阿新 • • 發佈:2018-12-30
easyui datagrid 定義列的方式通常是:
[html] view plain copy print?- $('#grid').datagrid({columns:[[
- {field:'f1',title:'欄位1',width:160},
- {field:'f2',title:'欄位2',width:160}
- ]]});
$('#grid').datagrid({columns:[[ {field:'f1',title:'欄位1',width:160}, {field:'f2',title:'欄位2',width:160} ]]});
但在實際專案中,我們會經常需要datagrid能動態生成列。
很佩服這個作者,他居然能在easyui那一堆滿是數字和字母組合的變數的被混淆的原始碼中,找到自己想要擴充套件的功能。。。強!
但是我不喜歡這種方式。畢竟修改原始碼有很多副作用,還是喜歡原生態。
動態生成列,這個很常見的需求,easyui不太可能不支援。
只是官方文件沒有提到而已,可能作者是想靠這些高階功能賺諮詢費。。。
說了很多廢話,現在貼出我費了不少周折搞定的方法:
[html] view plain copy print?- var options={};
- $(function(){
- var myNj
- //初始化
- $("#disgrid").datagrid({
- type: 'POST',
- nowrap: false,
- striped: true,
- fit:true,
- width:1024,
- height:500,
- url:'',
- pageSize:30,
- remoteSort: false,
- pagination:true,
- rownumbers:true,
- singleSelect:true,
- queryParams:{
- nj:myNj,
- unitType:1
- }
- });
- fetchData(myNj);
- });
- function fetchData(nj) {
- var s = "";
- s = "[[";
- s = s + "{field:'unitname',title:'單元',width:160},{field:'practicetime',title:'測試時間',width:160},{field:'userid',title:'userid',width:120,hidden:'true'},{field:'serial',title:'serial',width:120,hidden:'true'},{field:'unitid',title:'unitid',width:100,hidden:'true'},";
- //lu todo 列的定義可從伺服器獲得
- if (nj==9) {
- s = s + "{field:'aipanel_text_exam',title:'短文朗讀',width:80},{field:'aipanel_scene_exam',title:'情景對話',width:80},{field:'aipanel_oral_exam',title:'簡短說話',width:80}";
- //lu 加一個計算列
- s = s + ",{field:'tatal_score',title:'總分',width:60,formatter:function(value,rec){return paraseIntValue(rec.aipanel_text_exam)+paraseIntValue(rec.aipanel_scene_exam)+paraseIntValue(rec.aipanel_oral_exam);}}";
- }else if (nj==7||nj==8){
- //....
- }
- s = s + "]]";
- options={};
- options.url = '/app/search.do';
- options.queryParams = {
- nj:nj,
- unitType:1
- };
- options.columns = eval(s);
- //lu 增加一列
- options.columns[0].push(
- {
- field:'desc',title:'檢視詳情',width:60,
- formatter:function(value,rec){
- return "<ahref=\"javascript:showDescInfo(\'"+rec.serial+"\',\'"+rec.scene_score+"\',\'"+rec.total_score+"\');\">詳情</a>";
- }
- }
- );
- $('#disgrid').datagrid(options);
- $('#disgrid').datagrid('reload');
- }
var options={};
$(function(){
var myNj = 9;
//初始化
$("#disgrid").datagrid({
type: 'POST',
nowrap: false,
striped: true,
fit:true,
width:1024,
height:500,
url:'',
pageSize:30,
remoteSort: false,
pagination:true,
rownumbers:true,
singleSelect:true,
queryParams:{
nj:myNj,
unitType:1
}
});
fetchData(myNj);
});
function fetchData(nj) {
var s = "";
s = "[[";
s = s + "{field:'unitname',title:'單元',width:160},{field:'practicetime',title:'測試時間',width:160},{field:'userid',title:'userid',width:120,hidden:'true'},{field:'serial',title:'serial',width:120,hidden:'true'},{field:'unitid',title:'unitid',width:100,hidden:'true'},";
//lu todo 列的定義可從伺服器獲得
if (nj==9) {
s = s + "{field:'aipanel_text_exam',title:'短文朗讀',width:80},{field:'aipanel_scene_exam',title:'情景對話',width:80},{field:'aipanel_oral_exam',title:'簡短說話',width:80}";
//lu 加一個計算列
s = s + ",{field:'tatal_score',title:'總分',width:60,formatter:function(value,rec){return paraseIntValue(rec.aipanel_text_exam)+paraseIntValue(rec.aipanel_scene_exam)+paraseIntValue(rec.aipanel_oral_exam);}}";
}else if (nj==7||nj==8){
//....
}
s = s + "]]";
options={};
options.url = '/app/search.do';
options.queryParams = {
nj:nj,
unitType:1
};
options.columns = eval(s);
//lu 增加一列
options.columns[0].push(
{
field:'desc',title:'檢視詳情',width:60,
formatter:function(value,rec){
return "<a href=\"javascript:showDescInfo(\'"+rec.serial+"\',\'"+rec.scene_score+"\',\'"+rec.total_score+"\');\">詳情</a>";
}
}
);
$('#disgrid').datagrid(options);
$('#disgrid').datagrid('reload');
}
是不是覺得很簡單?優雅的原生支援。。。
需要注意的是,列定義的JSON格式,很重要,不能錯!如果格式不對,就不能正常工作。