Magic Grid ComboBox JQuery 版

最新推荐文章于 2014-05-23 15:59:34 发布

Mac_J

最新推荐文章于 2014-05-23 15:59:34 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript JQuery/Ext Plugin 文章标签： jQuery 下拉框 grid combobox boarsoft.com ViewUI

本文链接：https://blog.youkuaiyun.com/Mac_J/article/details/83974090

Javascript JQuery/Ext Plugin 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在MagicCombo组件中嵌入Grid，支持分页查找和单选功能，包括单选示例代码、多选示例链接以及Ext版实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在MagicCombo组件中嵌入Grid，以支持分页查找和跨页选取
单选示例
[url]http://www.boarsoft.com/javascript/combo/grid1.html[/url]
多选示例
[url]http://www.boarsoft.com/javascript/combo/grid2.html[/url]

之前做的一个 Ext版的 [url]http://www.boarsoft.com/javascript/gridCombo[/url]

[url=http://www.boarsoft.com/javascript/combo/grid1.html][img]http://dl.iteye.com/upload/attachment/521386/1e526e22-1074-3d78-a22b-2697761c163d.png[/img][/url]

单选示例代码


<script type="text/javascript" src="/js/mac/pager.js"></script>
<script type="text/javascript" src="/js/mac/grid.js"></script>
<script type="text/javascript">
$(function(){
	var gd1 = $('<div class="grid"></div>').mac('grid', {
		key: 'no',
		cols : [{
			field: 'subject', title : 'Subject', width: 150
		},{
			field: 'summary', title : 'Summary', width: 150
		},{
			field: 'debit', title : 'Debbit', width: 80, sort: true,
			render: function(r, tr){
				return '<div class="money">$'+r.debit+'</div>';
			}
		},{
			field: 'credit', title : 'Credit', width: 80, sort: true,
			render: function(r, tr){
				return '<div class="money">$'+r.credit+'</div>';
			}
		}],
		loader: {
			url: '/javascript/grid/data.php',
			params: { pageNo: 1, pageSize: 20 },
			autoLoad: true
		},
		pagerLength: 10,
		onRowClick: function(){
			var ec = $(this);
			gd1.find('.tr').removeClass('selected');
			ec.addClass('selected');
			var k = ec.attr('name');
			gd1.selected = {};
			gd1.selected[k] = gd1.data[k];
			cb1.select(gd1.data[k]);
			cb1.close();
		},
		afterLoad: function(dd, po){
			gd1.select(cb1.selected);
		}
	});
	gd1.select = function(sl){
		var at = gd1.find('.tr').removeClass('selected');
		$.each(sl, function(n, r){
			at.filter("[name='" + r.no + "']").addClass('selected');
		});
	}
	var cb1 = $('#combo1').mac('combo', {
		keyField: 'no',
		displayField: 'subject',
		boxWidth: 490,
		boxHeight: 300,
		width: 200,
		boxEl: gd1,
		multiSelect: false,
		onOpen: function(){
			gd1.adjust(cb1);
			gd1.select(cb1.selected);
		}
	});
	$('#get1').click(function(){
		mac.alert(JSON.stringify(cb1.selected[0]));
	});
	$('#set1').click(function(){
		cb1.select({ no: 2, subject: 'Subject 002' });
	});
	$('button').button();
});
</script>
<div id="combo1" class="combo customCombo"></div><br>
  <button id="get1">get1</button> <button id="set1">set1</button>