前言
扩展自$.fn.combo.defaults和$.fn.datagrid.defaults。使用$.fn.combogrid.defaults重写默认值对象。下载该插件翻译源码
数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件，该控件允许用户快速查找和选择，并且该控件提供了键盘导航支持，对行进行筛选
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译：qq 1364386878 下拉表格
*/
(function ($) { function create(jq) {
var options = $.data(jq, "combogrid").options;
var grid = $.data(jq, "combogrid").grid;
$(jq).addClass("combogrid-f");
$(jq).combo(options);
var panel = $(jq).combo("panel");
if (!grid) {
grid = $("<table></table>").appendTo(panel);
$.data(jq, "combogrid").grid = grid;
}
//
grid.datagrid($.extend({}, options, {
border: false,
fit: true,
singleSelect: (!options.multiple),
onLoadSuccess: function (_6) {
var remainText = $.data(jq, "combogrid").remainText;
var remainText = $(jq).combo("getValues");
_setValues(jq, remainText, remainText);
options.onLoadSuccess.apply(jq, arguments);
}, onClickRow: onClickRow,
onSelect: function (rowIndex, rowData) {
retrieveValues();
options.onSelect.call(this, rowIndex, rowData);
},
onUnselect: function (rowIndex, rowData) {
retrieveValues();
options.onUnselect.call(this, rowIndex, rowData);
},
onSelectAll: function (rows) {
retrieveValues();
options.onSelectAll.call(this, rows);
},
onUnselectAll: function (rows) {
if (options.multiple) {
retrieveValues();
}
options.onUnselectAll.call(this, rows);
}
})); function onClickRow(rowIndex, row) {
$.data(jq, "combogrid").remainText = false;
retrieveValues();
if (!options.multiple) {
$(jq).combo("hidePanel");
}
options.onClickRow.call(this, rowIndex, row);
}; function retrieveValues() {
var remainText = $.data(jq, "combogrid").remainText;
var rows = grid.datagrid("getSelections");
var vv = [], ss = [];
for (var i = 0; i < rows.length; i++) {
vv.push(rows[i][options.idField]);
ss.push(rows[i][options.textField]);
}
if (!options.multiple) {
$(jq).combo("setValues", (vv.length ? vv : [""]));
} else {
$(jq).combo("setValues", vv);
}
if (!remainText) {
$(jq).combo("setText", ss.join(options.separator));
}
};
};
//选择行
function selectRow(jq, step) {
var options = $.data(jq, "combogrid").options;
var grid = $.data(jq, "combogrid").grid;
var length = grid.datagrid("getRows").length;
if (!length) {
return;
}
$.data(jq, "combogrid").remainText = false;
var index;
var rows = grid.datagrid("getSelections");
if (rows.length) {
index = grid.datagrid("getRowIndex", rows[rows.length - 1][options.idField]);
index += step;
if (index < 0) {
index = 0;
}
if (index >= length) {
index = length - 1;
}
} else {
if (step > 0) {
index = 0;
} else {
if (step < 0) {
index = length - 1;
} else {
index = -1;
}
}
}
if (index >= 0) {
grid.datagrid("clearSelections");
grid.datagrid("selectRow", index);
}
};
//设置值
function _setValues(jq, values, remainText) {
var options = $.data(jq, "combogrid").options;
var grid = $.data(jq, "combogrid").grid;
var rows = grid.datagrid("getRows");
var ss = [];
for (var i = 0; i < values.length; i++) {
var index = grid.datagrid("getRowIndex", values[i]);
if (index >= 0) {
grid.datagrid("selectRow", index);
ss.push(rows[index][options.textField]);
} else {
ss.push(values[i]);
}
}
if ($(jq).combo("getValues").join(",") == values.join(",")) {
return;
}
$(jq).combo("setValues", values);
if (!remainText) {
$(jq).combo("setText", ss.join(options.separator));
}
};
//查询
function _query(jq, q) {
var options = $.data(jq, "combogrid").options;
var grid = $.data(jq, "combogrid").grid;
$.data(jq, "combogrid").remainText = true;
if (options.multiple && !q) {
_setValues(jq, [], true);
} else {
_setValues(jq, [q], true);
}
if (options.mode == "remote") {
grid.datagrid("clearSelections");
grid.datagrid("load", $.extend({}, options.queryParams, { q: q }));
} else {
if (!q) {
return;
}
var rows = grid.datagrid("getRows");
for (var i = 0; i < rows.length; i++) {
if (options.filter.call(jq, q, rows[i])) {
grid.datagrid("clearSelections");
grid.datagrid("selectRow", i);
return;
}
}
}
};
//实例化组件
$.fn.combogrid = function (target, parm) {
if (typeof target == "string") {
var method = $.fn.combogrid.methods[target];
if (method) {
return method(this, parm);
} else {
return $.fn.combo.methods[target](this, parm);
}
}
target = target || {};
return this.each(function () {
var state = $.data(this, "combogrid");
if (state) {
$.extend(state.options, target);
} else {
state = $.data(this, "combogrid", {
options: $.extend({},
$.fn.combogrid.defaults,
$.fn.combogrid.parseOptions(this),
target)
});
}
create(this);
});
};
//下拉表格默认方法
$.fn.combogrid.methods = {
//返回属性对象
options: function (jq) {
var options = $.data(jq[0], "combogrid").options;
options.originalValue = jq.combo("options").originalValue;
return options;
},
//返回数据表格对象
grid: function (jq) {
return $.data(jq[0], "combogrid").grid;
},
//返回数据表格对象
setValues: function (jq, values) {
return jq.each(function () {
_setValues(this, values);
});
},
//设置组件值
setValue: function (jq, value) {
return jq.each(function () {
_setValues(this, [value]);
});
},
//设置组件值
clear: function (jq) {
return jq.each(function () {
$(this).combogrid("grid").datagrid("clearSelections");
$(this).combo("clear");
});
},
//重置
reset: function (jq) {
return jq.each(function () {
var options = $(this).combogrid("options");
if (options.multiple) {
$(this).combogrid("setValues", options.originalValue);
} else {
$(this).combogrid("setValue", options.originalValue);
}
});
}
};
//解析器
$.fn.combogrid.parseOptions = function (target) {
var t = $(target);
return $.extend({}, $.fn.combo.parseOptions(target),
$.fn.datagrid.parseOptions(target),
$.parser.parseOptions(target, ["idField", "textField", "mode"]));
};
$.fn.combogrid.defaults = $.extend({}, $.fn.combo.defaults,
$.fn.datagrid.defaults, {
loadMsg: null,//在数据表格加载远程数据的时候显示消息
idField: null,//ID字段名称
textField: null,//ID字段名称
//定义在文本改变的时候如何读取数据网格数据。设置为'remote'，
//数据表格将从远程服务器加载数据。当设置为'remote'模式的时候，用户输入将会发送到名为'q'的http请求参数，向服务器检索新的数据。
mode: "local", keyHandler: {
up: function () {
selectRow(this, -1);
},
down: function () {
selectRow(this, 1);
},
enter: function () {
selectRow(this, 0);
$(this).combo("hidePanel");
},
query: function (q) {
_query(this, q);
}
},
//定义在'mode'设置为'local'的时候如何选择本地数据，返回true时则选择该行
filter: function (q, row) {
var options = $(this).combogrid("options");
return row[options.textField].indexOf(q) == 0;
}
});
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboGrid Actions - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.validatebox.js"></script>
<script src="../../plugins2/jquery.panel.js"></script>
<script src="../../plugins2/jquery.resizable.js"></script>
<script src="../../plugins2/jquery.linkbutton.js"></script>
<script src="../../plugins2/jquery.pagination.js"></script>
<script src="../../plugins2/jquery.combo.js"></script>
<script src="../../plugins2/jquery.datagrid.js"></script>
<script src="../../plugins2/jquery.combogrid.js"></script>
</head>
<body>
<h2>ComboGrid Actions</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the buttons below to perform actions.</div>
</div>
<div style="margin:10px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
</div>
<input id="cc" class="easyui-combogrid" style="width:250px" data-options="
panelWidth: 500,
idField: 'itemid',
textField: 'productname',
url: '../combogrid/datagrid_data1.json',
columns: [[
{field:'itemid',title:'Item ID',width:80},
{field:'productname',title:'Product',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:60,align:'center'}
]],
fitColumns: true
">
<script type="text/javascript">
function getValue(){
var val = $('#cc').combogrid('getValue');
alert(val);
}
function setValue(){
$('#cc').combogrid('setValue', 'EST-13');
}
function disable(){
$('#cc').combogrid('disable');
}
function enable(){
$('#cc').combogrid('enable');
}
</script>
</body>
</html>