easyUI实现搜索下拉框,省市的级联下拉框和编辑时的赋值
2016-02-19 00:00
267 查看
摘要: easyUI的combobox的用法以及经典例子的实现
以上是html页面上显示的省市级联
接下来是编辑时候的js内容
下面是搜索下拉框
下面是编辑时的js
下面是搜索接口调用的js
<td class="titleTd"><label>所在地区:</label></td> <td><select class="easyui-combobox" id="province" onchange="changeProvince()" name="province" style="width: 120px;" data-options=" url:'../advanced/getProvinceList.st', method:'get', valueField:'provinceName', textField:'provinceName', editable: true, panelHeight:'auto', onSelect: function(rec){ var url = '../advanced/getCityList.st?provinceID='+rec.id; $('#city').combobox('reload', url); } "></select> <select class="easyui-combobox" id="city" name="city" style="width: 120px;" data-options=" method:'get', valueField:'cityName', textField:'cityName', panelHeight:'auto' "></select> </td>
以上是html页面上显示的省市级联
接下来是编辑时候的js内容
function edit(index) { var row = $('#dg').datagrid('getData').rows[index]; if (row) { $('#dlg').dialog('open').dialog('center').dialog('setTitle', '编辑会员'); $('#fm').form('load', row); if(row.province){ $('#city').combobox('reload', '../advanced/getCityList.st?provinceID='+row.province); } url = 'modifyMember.st'; } }
下面是搜索下拉框
<tr> <td class="titleTd" width="80px"><label>发送人:</label></td> <td><input class="easyui-combobox" name="member.userId" id="member_userId" required="true" data-options=" loader: memberLoader, mode: 'remote', valueField: 'id', textField: 'content'" /></td> </tr>
下面是编辑时的js
function edit(index) { var row = $('#dg').datagrid('getData').rows[index]; if (row) { $('#dlg').dialog('open').dialog('center').dialog('setTitle', '编辑评论'); $('#fm').form('load', row); $('#member_userId').combobox('setValue', row.member.userId); $('#member_userId').combobox('setText',row.member.userLogonId); url = 'modifyConversation.st'; } }
下面是搜索接口调用的js
$.extend( //会员信息选择 memberLoader = function(param,success,error){ var q = param.q || ''; if (q.length <= 1){return false} $.ajax({ url: '../member/autoListMember.st', dataType: 'json', data: { userLogonId: q }, success: function(data){ var items = $.map(data, function(item){ return { id: item.id, content: item.content }; }); success(items); }, error: function(){ error.apply(this, arguments); } }); } )
相关文章推荐
- easyui------显示隐藏列功能
- 如何使用jquery easyui创建标签组件
- jQuery寻找n以内完全数的方法
- 推荐10个2014年最佳的jQuery视频插件
- C#实现绑定Combobox的方法
- jquery+CSS3实现淘宝移动网页菜单效果
- 采用easyui tree编写简单角色权限代码的方法
- jQuery实现本地预览上传图片功能
- ComboBox 和 DateField 在IE下消失的解决方法
- MFC之ComboBox控件用法实例教程
- jquery实现触发时更新下拉列表内容的方法
- WinForm实现为ComboBox绑定数据源并提供下拉提示功能
- 基于jquery中children()与find()的区别介绍
- 了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
- 轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
- 基于jQuery实现网页打印功能
- 在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
- JQuery打造PHP的AJAX表单提交实例
- jquery easyui使用心得
- jQuery EasyUi实战教程之布局篇