ComboGrid( 数据表格下拉框)

一． 加载方式
//class 加载方式
<select id="box" class="easyui-combogrid" name="dept"
style="width:250px;"
data-options="
panelWidth:450,
value:'请选择一个值',
idField:'id',
textField:'user',
url:'content.json',
columns:[[
{field:'user',title:'帐号',width:120},
{field:'email',title:'邮箱',width:120},
{field:'date',title:'创建时间',width:120},
]]
"></select>
//JS 加载方式
<input id="box" name="user" value="请选择一个用户">
$('#box').combogrid({
panelWidth : 600,
idField : 'id',
textField : 'user',
url : 'content.json',
columns : [[
{
field : 'id',
title : '编号',

width : 120,
},
{
field : 'user',
title : '帐号',
width : 120,
},
{
field : 'email',
title : '邮箱',
width : 120,
},
{
field : 'date',
title : '创建时间',
width : 120,
},
]]
});

 

二．属性列表

$('#box').combogrid({
panelWidth : 600,
multiple: true,
loadMsg : '加载数据中...',
idField : 'id',
textField : 'user',
url : 'user.php',

fitColumns : true,
//mode : 'local',
filter: function(q, row){
var opts = $(this).combogrid('options');
return row[opts.textField].indexOf(q) >= 0;
},
columns:[[
{
field:'id',
title:'编号',
width:100,
checkbox:true,
},
{
field:'user',
title:'帐号',
width:100,
},
{
field:'email',
title:'电子邮件',
width:100,
},
{
field:'date',
title:'创建时间',
width:100,
}
]] ,
});

PS ：数据表格下拉框事件完全扩展自 combo(自定义下拉框)和 datagrid(数据表格)。

 

三． 方法列表

$('#box').combogrid('clear');
$('#box').combogrid('setValue', 1);
$('#box').combogrid('setValues', [1,2]);