第⼆百⼆⼗四节，jQueryEasyUI，ComboGrid（数据表格下拉
框）组件
jQuery EasyUI，ComboGrid(数据表格下拉框)组件
学习要点：
1.加载⽅式
2.属性列表
3.⽅法列表
本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使⽤⽅法，这个组件依赖于 Combo(⾃定义下拉框)和 DataGrid(数据表格)组件。
⼀．加载⽅式
class 加载⽅式
<select id="box" class="easyui-combogrid" name="dept"
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="请选择⼀个⽤户">
js
combogrid()将⼀个input元素执⾏数据表格下拉框组件
$(function () {
$('#box')bogrid({
panelWidth: 600,
idField: 'id',
textField: 'user',
url: 'content.json',
columns: [[
{
field: 'id',
title: '编号',
width: 120,
},
{
},
{
field: 'date',
title: '创建时间',
width: 120,
}
]]
});
});
⼆．属性列表
注意：Combo(⾃定义下拉框)组件，⽤⾃定义下拉框的属性，⽅法，事件 DataGrid(数据表格)组件⽤数据表格的属性，⽅法，事件
jquery是什么功能组件loadMsg string 在数据表格加载远程数据的时候显⽰消息。默认值为 null。
$(function () {
$('#box')bogrid({
panelWidth: 600, //数据表格宽度
idField: 'id', //设置value值，⼀般设置数据库字段
textField: 'user', //显⽰在⽂本框中的⽂本字段
url: 'content.json', //远程加载数据地址
loadMsg:'数据加载中',
columns: [[ //表格数据字段
{
field: 'id',
title: '编号',
width: 120,
},
{
field: 'user',
title: '帐号',
width: 120,
},
{
}
]]
});
});
idField string ID 字段名称。默认值为 null。
$(function () {
$('#box')bogrid({
panelWidth: 600, //数据表格宽度
idField: 'id', //设置value值，⼀般设置数据库字段
textField: 'user', //显⽰在⽂本框中的⽂本字段
url: 'content.json', //远程加载数据地址
loadMsg:'数据加载中',
columns: [[ //表格数据字段
{
field: 'id',
title: '编号',
width: 120,
},
{
field: 'user',
title: '帐号',
width: 120,
},
{
field: 'email',
title: '邮箱',
width: 120,
},
{
field: 'date',
title: '创建时间',
width: 120,
}
]]
});
});
textField string 要显⽰在⽂本框中的⽂本字段。默认值为null。$(function () {
$('#box')bogrid({
panelWidth: 600, //数据表格宽度
idField: 'id', //设置value值，⼀般设置数据库字段
textField: 'user', //显⽰在⽂本框中的⽂本字段
url: 'content.json', //远程加载数据地址
loadMsg:'数据加载中',
columns: [[ //表格数据字段
{
field: 'id',
title: '编号',
width: 120,
},
{
field: 'user',
title: '帐号',
width: 120,
},
{
field: 'email',
title: '邮箱',
width: 120,
},
{
field: 'date',
title: '创建时间',
width: 120,
}
]]
});
});
⽤户输⼊将会发送到名为'q'的 http 请求参数，向服务器检索新的数据。默认值为local。$(function () {
$('#box')bogrid({
panelWidth: 600, //数据表格宽度
idField: 'id', //设置value值，⼀般设置数据库字段
textField: 'user', //显⽰在⽂本框中的⽂本字段
url: 'content.json', //远程加载数据地址
loadMsg:'数据加载中',
mode:'remote',
// filter: function (q, row) {
// var opts = $(this)bogrid('options');
// return Field].indexOf(q) >= 0;
// },
columns: [[ //表格数据字段
{
field: 'id',
title: '编号',
width: 120,
},
{
field: 'user',
title: '帐号',
width: 120,
},
{
field: 'email',
title: '邮箱',
width: 120,
},
{
field: 'date',
title: '创建时间',
width: 120,
}
]]
});
});
filter function(q, row)定义在'mode'设置为'local'的时候如何选择本地数据，返回 true 时则选择该⾏。$(function () {
$('#box')bogrid({
panelWidth: 600, //数据表格宽度
idField: 'id', //设置value值，⼀般设置数据库字段
textField: 'user', //显⽰在⽂本框中的⽂本字段
url: 'content.json', //远程加载数据地址
loadMsg:'数据加载中',
// mode:'remote',
filter: function (q, row) {
var opts = $(this)bogrid('options');
return Field].indexOf(q) >= 0;
},
columns: [[ //表格数据字段
{
field: 'id',
title: '编号',
width: 120,
},
{
field: 'user',
title: '帐号',
width: 120,
},
{
field: 'email',
title: '邮箱',
width: 120,
},
{
field: 'date',
title: '创建时间',
width: 120,
}
]]
});
三，事件
PS：数据表格下拉框事件完全扩展⾃ combo(⾃定义下拉框)和 datagrid(数据表格)。四，⽅法列表
options none 返回属性对象。
$(function () {
$('#box')bogrid({
panelWidth: 600, //数据表格宽度
idField: 'id', //设置value值，⼀般设置数据库字段
textField: 'user', //显⽰在⽂本框中的⽂本字段
url: 'content.json', //远程加载数据地址
loadMsg:'数据加载中',
columns: [[ //表格数据字段
{
field: 'id',
title: '编号',
width: 120,
},
{
field: 'user',
title: '帐号',
width: 120,
},
{
field: 'email',
title: '邮箱',
width: 120,
},
{
field: 'date',
title: '创建时间',
width: 120,
}
]]
});
alert($('#box')bogrid('options')); //返回属性对象
});
grid none 返回数据表格对象。
$(function () {
$('#box')bogrid({
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论