easyui 下拉多选框
来源:互联网 发布:软件测试培训课程 编辑:程序博客网 时间:2024/06/16 13:10
1、将代码添加到common.js
//多选下拉框加上全选 只支持valueField = 'value', textField = 'label',window.commboboxAddSelectedAllValue = function(_data){if(!_data || _data.toString().length < 1){return _data;}var o = [{'value' : '' , 'label' : '--全部--'}];return o.concat(_data);}//多选下拉框选择的数据样式window.commboboxFornatter = function(_this, _row){ var opts = $(_this).combobox('options'); return '<input type="checkbox" class="combobox-checkbox" style="width:15px;">' + _row[opts.textField];}//获取下拉框中所有的值window.getcomboboxValues = function(_this){var data = $(_this).combobox('getData');var datas = new Array(data.length);for(var a in data) { datas[a] = data[a].value;}return datas;}//根据状态选中/取消选中来获取该调用什么方法window.getCommboboxActionByStatus = function(_status){if(_status == true){return "select";}return "unselect";}//根据传入的值,控制下拉框的checkbox是否选中window.setComboboxCheckedStatus = function(_this, _value, _status, _opts){var el = _opts.finder.getEl(_this, $.trim(_value));el.find('input.combobox-checkbox')._propAttr('checked', _status);try {// 如果combobox中没有值会报错$(_this).combobox(getCommboboxActionByStatus(_status),$.trim(_value));} catch (_error) {//alert("|"+_valueArr[i]+"|"+_error)}}//设置多选下拉框中数据是否选中的状态window.setComboboxAllCheckboxStatus = function(_this, _status, _values){//获取下拉中的数据var children = $(_this).combobox("panel").children();$.each(children, function(index, obj){obj.firstChild.checked = _status;});$(_this).combobox('setValues',_values);}//多选下拉框选择数据事件window.commboboxSelectEvent = function(_this, _row, _status, _values){var _opts = $(_this).combobox('options');if (_row[_opts.valueField] == "" || _row[_opts.valueField] == "--全部--") {if(!window.commboboxSelectedAllFlag){window.commboboxSelectedAllFlag = true;return;}setComboboxAllCheckboxStatus(_this, _status, _values);} else { var el = _opts.finder.getEl(_this, _row[_opts.valueField]); el.find('input.combobox-checkbox')._propAttr('checked', _status); var _data = $(_this).combobox('getData'); var _selectedValues = $(_this).combobox('getValues'); if(_status && _selectedValues.length >= (_data.length-1)){ setComboboxAllCheckboxStatus(_this, _status, _values); } else {// 如果当前的操作有全选是选中的,就取消全选 var _flag = false; for(var _val in _selectedValues){ if(_selectedValues[_val] == ""){ _flag = true; break; } } // _flag 判断当前全选按钮是否选中,如果选中就取消,否则就跳过 if(!_flag){ return; } window.commboboxSelectedAllFlag = false;setComboboxCheckedStatus(_this, "", false, _opts); }}}//标识下拉框中全选是人工点击触发还是设置全选/取消全选时触发window.commboboxSelectedAllFlag = true;
2、使用方式 引入common.js
<div><label>路由代码</label><input class="easyui-combobox textbox" id="queryRouteCode" name="queryRouteCode" > </div><div style="display: none;"><input class="easyui-textbox" id="query_routeCode" name="routeCode" style="width: 130px" /> </div>var routeCodeArr = [{"value" : "t1","label" : "T1"},{"value" : "t4","label" : "T4"},{"value" : "t6","label" : "T6"},{"value" : "t8","label" : "T8"},{"value" : "sp4","label" : "SP4"}];window.query_routecode = null;$("#queryRouteCode").combobox({data : routeCodeArr,valueField : 'value',textField : 'label',editable : false,multiple : true,loadFilter:function(data){return commboboxAddSelectedAllValue(data);},formatter: function (row) {return commboboxFornatter(this,row);},onLoadSuccess: function() {window.query_routecode =(getcomboboxValues(this)).join();$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onSelect: function (row) {commboboxSelectEvent(this,row,true,window.query_routecode.split(','));$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onUnselect: function (row) {commboboxSelectEvent(this,row,false,[]);$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));}});注意:最后获取值时是获取id为query_routeCode 隐藏域的值远程获取window.query_routecode = null;$("#queryRouteCode").combobox({//data : routeCodeArr,url : contextPath + '/omcs/naga/siteTransportCapacityView/findAllRouteCode.pvt',mode : 'remote',rowsProperty : 'rows',valueField : 'value',textField : 'label',editable : false,multiple : true,loadFilter:function(data){return commboboxAddSelectedAllValue(data);},formatter: function (row) {return commboboxFornatter(this,row);},onLoadSuccess: function() {window.query_routecode =(getcomboboxValues(this)).join();$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onSelect: function (row) {commboboxSelectEvent(this,row,true,window.query_routecode.split(','));$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onUnselect: function (row) {commboboxSelectEvent(this,row,false,[]);$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));}});
3、加载时选中
onLoadSuccess: function() {window.query_routeCode=(getcomboboxValues(this)).join();// 默认设置选中所有setComboboxAllCheckboxStatus(this,true,window.query_routeCode.split(','));$("#query_routeCode").textbox("setValue",$(this).combobox('getValues'));},onLoadSuccess : function() {window.query_routeCode= (getcomboboxValues(this)).join();var arr=window.query_routeCode.split(',');var temp=new Array();var children = $(this).combobox("panel").children();$.each(children, function(index, obj) {if (0 < index && index < 4) {obj.firstChild.checked = true;temp.push(arr[index]);}});//将需要选择的temp设置成当前复选框的值$(this).combobox('setValues',temp);$("#query_operType").textbox("setValue",$(this).combobox('getValues'));},onLoadSuccess: function() {//复选框所有能选中的值window.query =(getcomboboxValues(this)).join();var arr=query.split(",");//需要选中的值 如表格选中行修改时获取var selectedRow = $('#mainGrid').datagrid('getChecked')[0];window.querycode=selectedRow.route_code;var children = $(this).combobox("panel").children();$.each(children, function(index, obj) {//遍历所有复选框值 如果在需要选中的范围内将其选中if(window.querycode.indexOf(arr[index])>-1 && arr[index]!=""){obj.firstChild.checked = true;}});$(this).combobox('setValues',window.querycode.split(','));$("#query_roteCode").textbox("setValue",$(this).combobox('getValues'));}
阅读全文
0 0
- easyui 下拉多选框
- easyUI 下拉列表
- select下拉列表(easyui)
- easyui下拉列表属性
- easyui 下拉框树
- easyui隐藏下拉框
- easyui-combo下拉框
- select下拉列表(easyui)
- easyui 下拉框联动
- easyui-select 下拉选框必填
- easyUI 下拉框
- 加载easyui下拉框
- EasyUI实现下拉框多选
- 关于easyui combobox下拉框实现多选框的实现
- easyui easyui-combobox select下拉框问题
- jQuery EasyUI详解-EasyUI下拉框combobox
- jQuery EasyUI详解-EasyUI下拉列表datalist
- easyui 验证下拉菜单select
- LightOJ
- WebRTC 音视频同步方法
- Magento通过可配置(configurable)商品Id获得子类Ids
- 增1减1运算符
- 关于Integer
- easyui 下拉多选框
- 一片看懂肠道菌群在人体中的作用-岛国科普又走在了我们前面
- JN项目-用代码级联删除评论和收藏
- 支付服务架构演进之路——解决的问题
- python+selenium自动化脚本跑完后提示TextIOWrapper信息
- 习题6.2 (3)计算a+aa+aaa+...+aa...a(n个a)的值,n和a的值由键盘输入
- 1052. 卖个萌 (20)
- Xfermode改变按钮背景或者drawable的状态颜色
- 查找某个文件夹下面的所有的文件 和 所有后缀名为".txt"的文件名