EasyUI Forum
May 18, 2024, 12:19:55 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How to load json data in editor of datagrid column dynamical?  (Read 66734 times)
ejzhang
Jr. Member
**
Posts: 61



View Profile
« on: March 25, 2013, 12:44:44 AM »

datagrid colume define:
Code:
{
title:'<strong>姓名</strong>',
field:'EmpID',
rowspan:2,
width:68,
align:'center',
formatter:function(value,row){
return row.EmpName;
},
editor:{
type:'combobox',
options:{
valueField:'EmpID',
textField:'EmpName',
url:'emp.json',
multiple:false,
editable:false,
required:false
}
}
}
datagrid onClickRow handle:
Code:
onClickRow:function(rowIndex){
   if (lastIndex != rowIndex && $(this).datagrid('validateRow', lastIndex)){
var ed = $(this).datagrid('getEditor', {index:lastIndex, field:'EmpID'});
if (ed){
$(this).datagrid('getRows')[lastIndex]['EmpName'] = $(ed.target).combobox('getText');
}
$(this).datagrid('endEdit', lastIndex);
$(this).datagrid('beginEdit', rowIndex);
lastIndex = rowIndex;
} else {
$(this).datagrid('selectRow', lastIndex);
}
}
emp.json:
Code:
[
{"EmpID":289,"EmpName":"\u66f9\u6587\u771f"},
{"EmpID":290,"EmpName":"\u675c\u6c38\u5f3a"},
{"EmpID":291,"EmpName":"\u51af\u7acb\u660e"},
{"EmpID":292,"EmpName":"\u4ed8\u6653\u94a2"},
{"EmpID":293,"EmpName":"\u90ed\u8fde\u745e"},
{"EmpID":295,"EmpName":"\u674e\u5b9d\u5149"},
{"EmpID":296,"EmpName":"\u674e\u798f\u589e"},
{"EmpID":294,"EmpName":"\u674e\u5efa"},
{"EmpID":297,"EmpName":"\u674e\u6770\u5112"},
{"EmpID":298,"EmpName":"\u674e\u4fca\u51ef"},
{"EmpID":299,"EmpName":"\u674e\u5e0c\u81e3"},
{"EmpID":301,"EmpName":"\u5218\u7115\u5947"},
{"EmpID":300,"EmpName":"\u5218\u8f89"},
{"EmpID":302,"EmpName":"\u8def\u5bb6\u8fdb"},
{"EmpID":303,"EmpName":"\u9a6c\u5b50\u6d9b"},
{"EmpID":304,"EmpName":"\u6bdb\u6811\u5cad"},
{"EmpID":305,"EmpName":"\u7c73\u6842\u6885"},
{"EmpID":306,"EmpName":"\u725b\u6811\u6a80"},
{"EmpID":307,"EmpName":"\u6f58\u745e\u5b58"},
{"EmpID":308,"EmpName":"\u4efb\u56fd\u653f"},
{"EmpID":309,"EmpName":"\u82ae\u5efa\u8f89"},
{"EmpID":310,"EmpName":"\u738b\u5efa\u5fe0"},
{"EmpID":311,"EmpName":"\u738b\u514b\u65b0"},
{"EmpID":312,"EmpName":"\u738b\u7acb\u5cf0"}
]
« Last Edit: March 29, 2013, 01:14:47 AM by ejzhang » Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #1 on: March 26, 2013, 10:31:38 PM »

Why it's not work? The combobox is empty.
Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #2 on: March 29, 2013, 01:19:08 AM »

I want to reload json data into combobox editor of datagrid column when i click a button each times. thanks very much!
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: March 29, 2013, 09:53:12 AM »

Please refer to this example http://jsfiddle.net/xAnDj/.
Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #4 on: March 29, 2013, 10:17:38 PM »

thanks first! but i need reload different data each times, such as fetch from a background script with different argument.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #5 on: March 30, 2013, 12:01:21 AM »

After get the combobox editor object, call 'reload' method to reload its new data.
Code:
$(this).datagrid('beginEdit', rowIndex);
var ed = $(this).datagrid('getEditor',{index:rowIndex,field:'EmpID'});
$(ed.target).combobox('reload', yoururl);
« Last Edit: March 30, 2013, 08:27:55 AM by stworthy » Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #6 on: March 30, 2013, 07:01:07 AM »

I cannot do it correctly, help me please! these are my code snippets as following:
Code:
var empData = new Array();
Code:
onLoadSuccess:function(data){
if (data.rows.length > 0){
$(this).datagrid('selectRow',0);
var ed = $(this).datagrid('beginEdit', 0);
if (ed){
$(ed.target).combobox('loadData', empData);
}
$(this).datagrid('endEdit', 0);
}
}
Code:
$btnSearch.click(function(){
$.ajaxSettings.async = false;
$.getJSON('getjson.php', {"dept": $sltDept.children('option:selected').val()}, function(data){empData = data.rows;});
$.ajaxSettings.async = true;
$gridAllowance.datagrid('load',{
"dept":$sltDept.children('option:selected').val(),
"date":$dbxDate.val()
});
});
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #7 on: March 30, 2013, 08:29:55 AM »

Please try the following code.
Code:
onLoadSuccess:function(data){
if (data.rows.length > 0){
$(this).datagrid('selectRow',0);
$(this).datagrid('beginEdit', 0);
var ed = $(this).datagrid('getEditor', {index:0,field:'EmpID'});
if (ed){
$(ed.target).combobox('loadData', empData);
}
$(this).datagrid('endEdit', 0);
}
}
Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #8 on: March 30, 2013, 07:50:52 PM »

I try to test that code, but nothing loaded yet!
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #9 on: March 30, 2013, 09:11:07 PM »

Try to call console.log(empData) before loadData for combobox to see if the empData is empty.
Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #10 on: March 30, 2013, 09:42:58 PM »

That's ok!
Code:
$(this).datagrid('selectRow',0);
$(this).datagrid('beginEdit',0);
var ed = $(this).datagrid('getEditor', {index:0, field:'EmpID'});
if (ed){
console.log(empData);
$(ed.target).combobox('loadData', empData);
}
$(this).datagrid('endEdit',0);
« Last Edit: March 30, 2013, 09:49:49 PM by ejzhang » Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #11 on: March 30, 2013, 09:51:20 PM »

some errors:
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #12 on: March 31, 2013, 02:58:37 AM »

Don't really known why to 'beginEdit' and then 'endEdit' at once in 'onLoadSuccess' event. Please refer to this example http://jsfiddle.net/gEJmG/. When click a row to begin editing, the combobox editor is created and its data is loaded with new 'empData'.
Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #13 on: March 31, 2013, 05:44:23 AM »

It's okay! thanks very much stworthy!
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!