easyUI toolbar中添加select下拉选

我通过参考一位大牛的实例,他的CSDN名: LYBwwp。好了上代码

首先我采用的datagrid,然后用的toolbar,又要添加一个下拉选不好实现。

toolbar: [{
                iconCls: 'icon-add',
                text: '发布信息',
                handler: function () { 
                	addMess(); }
            }, '-', {            //分隔符
                iconCls: 'icon-edit',
                text: '编辑信息',
                handler: function () {
                	editMess(); }
            }, '-', {
                iconCls: 'icon-remove',
                text: '删除信息',
                handler: function () {
                   delMess();}
            }, '-', { 
            text: ' 文章名:<input type="text" id="ZZtitle"/>' 
     		   }, { 
                iconCls: 'icon-search',
                text: '查询',
                handler: function () {
                  findMess(); 
                }
然后没办法 换了一种思路 实现

在body里面添加一个div

<!--  测试 -->
	<div id="DIV_toolbar" Style="margin:0px; padding:5px">
		类型:
		<select id="cc" class="easyui-combobox" name="typeId" style="width:100px;" data-options="required:true">
			<option selected="selected">请选择..</option>	
			<option value="1">通知</option>
			<option value="2">公告</option>
			<option value="3">新闻</option>
			<option value="4">政策</option>
		</select>
	
	</div>

然后在页面初始化的方法里面添加入下面这句话

	$('#DIV_toolbar').appendTo('.datagrid-toolbar');
下面上实现效果图

good luck!

EasyUI Toolbar 是一个常用的网页 UI 组件,提供了一系列常用的工具栏(Toolbar)控件,包括按钮、下拉框、文本框等。如果你想在 EasyUI Toolbar 添加搜索框,可以按照以下步骤进行: 1. 在 HTML 添加一个搜索框的输入框,例如: ```html <input class="easyui-textbox" data-options="prompt:'Search...',iconCls:'icon-search',iconAlign:'left',buttonText:'Search'" style="width:200px;"> ``` 2. 在 JavaScript 使用 easyui 方法来初始化 Toolbar,并将搜索框添加到工具栏,例如: ```javascript $('#toolbar').toolbar('append', { text: 'Search:', iconCls: 'icon-search', align: 'left', items: [{ text: '', html: '<input class="easyui-textbox" data-options="prompt:\'Search...\',iconCls:\'icon-search\',iconAlign:\'left\',buttonText:\'Search\'" style="width:200px;">' }] }); ``` 其,`#toolbar` 是 EasyUI Toolbar 的 ID,`text` 和 `iconCls` 分别表示搜索框前面的文本和图标,`items` 包含了搜索框的 HTML 代码。 3. 如果需要在搜索框输入文字后触发搜索事件,可以为搜索框添加 `onChange` 事件,例如: ```javascript $('.easyui-textbox').textbox({ onChange: function(newValue, oldValue) { // 处理搜索逻辑 } }); ``` 在 `onChange` 事件,你可以编写相应的搜索逻辑,例如向服务器发送 AJAX 请求获取搜索结果,并将结果显示在页面上。 希望这些信息能够帮助你实现 EasyUI Toolbar 的搜索框。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值