/** * jQuery webUI 1.1.0 * * */ if (typeof (WebUIManagers) == "undefined") WebUIManagers = {}; (function($) { $.fn.webGetComboBoxManager = function() { return WebUIManagers[this[0].id + "_ComboBox"]; }; $.webDefaults = $.webDefaults || {}; $.webDefaults.ComboBox = { resize: true, //是否调整大小 isMultiSelect: false, //是否多选 isShowCheckBox: false, //是否选择复选框 columns: false, //表格状态 selectBoxWidth: false, //宽度 selectBoxHeight: false, //高度 onBeforeSelect: false, //选择前事件 onSelected: null, //选择值事件 initValue: null, initText: null, valueField: 'id', textField: 'text', valueFieldID: null, slide: true, //是否以动画的形式显示 split: ";", data: null, tree: null, //下拉框以树的形式显示,tree的参数跟WebTree的参数一致 treeLeafOnly: true, //是否只选择叶子 grid: null, //表格 onStartResize: null, onEndResize: null, hideOnLoseFocus: true, url: null, //数据源URL(需返回JSON) onSuccess: null, onError: null, onBeforeOpen: null, //打开下拉框前事件,可以通过return false来阻止继续操作,利用这个参数可以用来调用其他函数,比如打开一个新窗口来选择值 render: null //文本框显示html函数 }; /// $.fn.webComboBox = function(options) { this.each(function() { if (this.usedComboBox) return; var p = $.extend({}, options || {}); if ($(this).attr("webui")) { try { var attroptions = $(this).attr("webui"); if (attroptions.indexOf('{') < 0) attroptions = "{" + attroptions + "}"; eval("attroptions = " + attroptions + ";"); if (attroptions) p = $.extend({}, attroptions, p || {}); } catch (e) { } } p = $.extend({}, $.webDefaults.ComboBox, p); if (p.columns) { p.isShowCheckBox = true; } if (p.isMultiSelect) { p.isShowCheckBox = true; } if (this.id == undefined) this.id = "WebUI_" + new Date().getTime(); var g = { //查找Text,适用多选和单选 findTextByValue: function(value) { if (value == undefined) return ""; var texts = ""; var contain = function(checkvalue) { var targetdata = value.toString().split(p.split); for (var i = 0; i < targetdata.length; i++) { if (targetdata[i] == checkvalue) return true; } return false; }; $(g.data).each(function(i, item) { var val = item[p.valueField]; var txt = item[p.textField]; if (contain(val)) { texts += txt + p.split; } }); if (texts.length > 0) texts = texts.substr(0, texts.length - 1); return texts; }, //查找Value,适用多选和单选 findValueByText: function(text) { if (!text && text == "") return ""; var contain = function(checkvalue) { var targetdata = text.toString().split(p.split); for (var i = 0; i < targetdata.length; i++) { if (targetdata[i] == checkvalue) return true; } return false; }; var values = ""; $(g.data).each(function(i, item) { var val = item[p.valueField]; var txt = item[p.textField]; if (contain(txt)) { values += val + p.split; } }); if (values.length > 0) values = values.substr(0, values.length - 1); return values; }, removeItem: function() { }, insertItem: function() { }, addItem: function() { }, selectValue: function(value) { var text = g.findTextByValue(value); if (p.tree) { g.selectValueByTree(value); } else if (!p.isMultiSelect) { po.changeValue(value, text); $("tr[value=" + value + "] td", g.selectBox).addClass("n-selected"); $("tr[value!=" + value + "] td", g.selectBox).removeClass("n-selected"); } else { po.changeValue(value, text); var targetdata = value.toString().split(p.split); $("table.n-table-checkbox :checkbox", g.selectBox).each(function() { this.checked = false; }); for (var i = 0; i < targetdata.length; i++) { $("table.n-table-checkbox tr[value=" + targetdata[i] + "] :checkbox", g.selectBox).each(function() { this.checked = true; }); } } }, bulidContent: function() { this.clearContent(); if (g.select) { g.setSelect(); } else if (g.data) { g.setData(g.data); } else if (p.tree) { g.setTree(p.tree); } else if (p.grid) { g.setGrid(p.grid); } else if (p.url) { $.ajax({ type: 'post', url: p.url, cache: false, dataType: 'json', success: function(data) { g.data = data; g.setData(g.data); if (p.onSuccess) p.onSuccess(g.data); }, error: function(XMLHttpRequest, textStatus) { if (p.onError) p.onError(XMLHttpRequest, textStatus); } }); } }, clearContent: function() { $("table", g.selectBox).html(""); //g.inputText.val(""); //g.valueField.val(""); }, setSelect: function() { this.clearContent(); $('option', g.select).each(function(i) { var val = $(this).val(); var txt = $(this).html(); var tr = $("" + txt + ""); $("table.n-table-nocheckbox", g.selectBox).append(tr); $("td", tr).hover(function() { $(this).addClass("n-over"); }, function() { $(this).removeClass("n-over"); }); }); $('td:eq(' + g.select[0].selectedIndex + ')', g.selectBox).each(function() { if ($(this).hasClass("n-selected")) { g.selectBox.hide(); return; } $(".n-selected", g.selectBox).removeClass("n-selected"); $(this).addClass("n-selected"); if (g.select[0].selectedIndex != $(this).attr('index') && g.select[0].onchange) { g.select[0].selectedIndex = $(this).attr('index'); g.select[0].onchange(); } var newIndex = parseInt($(this).attr('index')); g.select[0].selectedIndex = newIndex; g.select.trigger("change"); g.selectBox.hide(); g.inputText.val($(this).html()); }); po.addClickEven(); }, setData: function(data) { this.clearContent(); if (!data || !data.length) return; if (g.data != data) g.data = data; if (p.columns) { g.selectBox.table.headrow = $(""); g.selectBox.table.append(g.selectBox.table.headrow); g.selectBox.table.addClass("n-box-select-grid"); for (var j = 0; j < p.columns.length; j++) { var headrow = $("" + p.columns[j].header + ""); if (p.columns[j].width) { headrow.width(p.columns[j].width); } g.selectBox.table.headrow.append(headrow); } } for (var i = 0; i < data.length; i++) { var val = data[i][p.valueField]; var txt = data[i][p.textField]; if (!p.columns) { $("table.n-table-checkbox", g.selectBox).append("" + txt + ""); $("table.n-table-nocheckbox", g.selectBox).append("" + txt + ""); } else { var tr = $(""); $("td", g.selectBox.table.headrow).each(function() { var columnname = $(this).attr("columnname"); if (columnname) { var td = $("" + data[i][columnname] + ""); tr.append(td); } }); g.selectBox.table.append(tr); } } //自定义复选框支持 if (p.isShowCheckBox && $.fn.webCheckBox) { $("table input:checkbox", g.selectBox).webCheckBox(); } $(".n-table-checkbox input:checkbox", g.selectBox).change(function() { if (this.checked && p.onBeforeSelect) { var parentTD = null; if ($(this).parent().get(0).tagName.toLowerCase() == "div") { parentTD = $(this).parent().parent(); } else { parentTD = $(this).parent(); } if (parentTD != null && !p.onBeforeSelect(parentTD.attr("value"), parentTD.attr("text"))) { g.selectBox.slideToggle("fast"); return false; } } if (!p.isMultiSelect) { if (this.checked) { $("input:checked", g.selectBox).not(this).each(function() { this.checked = false; $(".n-checkbox-checked", $(this).parent()).removeClass("n-checkbox-checked"); }); g.selectBox.slideToggle("fast"); } } po.checkboxUpdateValue(); }); $("table.n-table-nocheckbox td", g.selectBox).hover(function() { $(this).addClass("n-over"); }, function() { $(this).removeClass("n-over"); }); po.addClickEven(); //选择项初始化 po.dataInit(); }, //树 setTree: function(tree) { this.clearContent(); g.selectBox.table.remove(); if (tree.checkbox != false) { tree.onCheck = function() { var nodes = g.treeManager.getChecked(); var value = []; var text = []; $(nodes).each(function(i, node) { if (p.treeLeafOnly && node.data.children) return; value.push(node.data[p.valueField]); text.push(node.data[p.textField]); }); po.changeValue(value.join(p.split), text.join(p.split)); }; } else { tree.onSelect = function(node) { if (p.treeLeafOnly && node.data.children) return; var value = node.data[p.valueField]; var text = node.data[p.textField]; po.changeValue(value, text); }; tree.onCancelSelect = function(node) { po.changeValue("", ""); }; } tree.onAfterAppend = function(domnode, nodedata) { if (!g.treeManager) return; var value = null; if (p.initValue) value = p.initValue; else if (g.valueField.val() != "") value = g.valueField.val(); g.selectValueByTree(value); }; g.tree = $(""); $("div:first", g.selectBox).append(g.tree); g.tree.webTree(tree); g.treeManager = g.tree.webGetTreeManager(); }, selectValueByTree: function(value) { if (value != null) { var text = ""; var valuelist = value.toString().split(p.split); $(valuelist).each(function(i, item) { g.treeManager.selectNode(item.toString()); text += g.treeManager.getTextByID(item); if (i < valuelist.length - 1) text += p.split; }); po.changeValue(value, text); } }, //表格 setGrid: function(grid) { this.clearContent(); g.selectBox.table.remove(); g.grid = $("div:first", g.selectBox); if (grid.checkbox != false) { grid.onCheckAllRow = grid.onCheckRow = function() { var rowsdata = g.gridManager.getCheckedRows(); var value = []; var text = []; $(rowsdata).each(function(i, rowdata) { value.push(rowdata[p.valueField]); text.push(rowdata[p.textField]); }); po.changeValue(value.join(p.split), text.join(p.split)); }; } else { grid.onSelectRow = function(rowdata, rowobj, index) { var value = rowdata[p.valueField]; var text = rowdata[p.textField]; po.changeValue(value, text); }; grid.onUnSelectRow = function(rowdata, rowobj, index) { po.changeValue("", ""); }; } grid.width = "100%"; grid.height = "100%"; grid.heightDiff = -2; grid.InWindow = false; g.grid.webGrid(grid); g.gridManager = g.grid.webGetGridManager(); p.hideOnLoseFocus = false; po.onEndResize = function() { g.gridManager && g.gridManager.setHeight(g.selectBox.height() - 2); }; }, data: p.data, inputText: null, select: null, textFieldID: "", valueFieldID: "", valueField: null //隐藏域(保存值) }; //private object var po = { dataInit: function() { var value = null; if (p.initValue != undefined && p.initValue != null && p.initText != undefined && p.initText != null ) { po.changeValue(p.initValue, p.initText); } //根据值来初始化 if (p.initValue != undefined && p.initValue != null) { value = p.initValue; var text = g.findTextByValue(value); po.changeValue(value, text); } //根据文本来初始化 else if (p.initText != undefined && p.initText != null) { value = g.findValueByText(p.initText); po.changeValue(value, p.initText); } else if (g.valueField.val() != "") { value = g.valueField.val(); var text = g.findTextByValue(value); po.changeValue(value, text); } if (!p.isShowCheckBox && value != null) { $("table tr", g.selectBox).find("td:first").each(function() { if (value == $(this).attr("value")) { $(this).addClass("n-selected"); } }); } if (p.isShowCheckBox && value != null) { $(":checkbox", g.selectBox).each(function() { var parentTD = null; var checkbox = $(this); if (checkbox.parent().get(0).tagName.toLowerCase() == "div") { parentTD = checkbox.parent().parent(); } else { parentTD = checkbox.parent(); } if (parentTD == null) return; var valuearr = value.toString().split(p.split); $(valuearr).each(function(i, item) { if (item == parentTD.attr("value")) { $(".n-checkbox", parentTD).addClass("n-checkbox-checked"); checkbox[0].checked = true; } }); }); } }, changeValue: function(newValue, newText) { g.valueField.val(newValue); g.inputText.val(newText); g.selectedValue = newValue; g.selectedText = newText; g.inputText.trigger("change").focus(); if (p.onSelected) p.onSelected(newValue, newText); }, //更新选中的值(复选框) checkboxUpdateValue: function() { var valueStr = ""; var textStr = ""; $("input:checked", g.selectBox).each(function() { var parentTD = null; if ($(this).parent().get(0).tagName.toLowerCase() == "div") { parentTD = $(this).parent().parent(); } else { parentTD = $(this).parent(); } if (!parentTD) return; valueStr += parentTD.attr("value") + p.split; textStr += parentTD.attr("text") + p.split; }); if (valueStr.length > 0) valueStr = valueStr.substr(0, valueStr.length - 1); if (textStr.length > 0) textStr = textStr.substr(0, textStr.length - 1); po.changeValue(valueStr, textStr); }, addClickEven: function() { //选项点击 $(".n-table-nocheckbox td", g.selectBox).click(function() { if (p.onBeforeSelect && !p.onBeforeSelect($(this).attr("value"), $(this).html())) { if (p.slide) g.selectBox.slideToggle("fast"); else g.selectBox.hide(); return false; } if ($(this).hasClass("n-selected")) { if (p.slide) g.selectBox.slideToggle("fast"); else g.selectBox.hide(); return; } $(".n-selected", g.selectBox).removeClass("n-selected"); $(this).addClass("n-selected"); if (g.select) { if (g.select[0].selectedIndex != $(this).attr('index')) { var newIndex = parseInt($(this).attr('index')); g.select[0].selectedIndex = newIndex; g.select.trigger("change"); } } if (p.slide) { g.boxToggling = true; g.selectBox.hide("fast", function() { g.boxToggling = false; }) } else g.selectBox.hide(); po.changeValue($(this).attr("value"), $(this).html()); }); }, toggleSelectBox: function(isHide) { var textHeight = g.wrapper.height(); g.boxToggling = true; if (isHide) { if (p.slide) { g.selectBox.slideToggle('fast', function() { g.boxToggling = false; }); } else { g.selectBox.hide(); g.boxToggling = false; } } else { var topheight = g.wrapper.offset().top - $(window).scrollTop(); var selfheight = g.selectBox.height() + textHeight + 4; if (topheight + selfheight > $(window).height() && topheight > selfheight) { g.selectBox.css("marginTop", -1 * (g.selectBox.height() + textHeight + 5)); } if (p.slide) { g.selectBox.slideToggle('fast', function() { g.boxToggling = false; if (!p.isShowCheckBox && $('td.n-selected', g.selectBox).length > 0) { var offSet = ($('td.n-selected', g.selectBox).offset().top - g.selectBox.offset().top); $(".n-box-select-inner", g.selectBox).animate({ scrollTop: offSet }); } }); } else { g.selectBox.show(); g.boxToggling = false; if (!g.tree && !g.grid && !p.isShowCheckBox && $('td.n-selected', g.selectBox).length > 0) { var offSet = ($('td.n-selected', g.selectBox).offset().top - g.selectBox.offset().top); $(".n-box-select-inner", g.selectBox).animate({ scrollTop: offSet }); } } } g.isShowed = g.selectBox.is(":visible"); } }; //文本框初始化 if (this.tagName.toLowerCase() == "input") { this.readOnly = true; g.inputText = $(this); g.textFieldID = this.id; } else if (this.tagName.toLowerCase() == "select") { $(this).addClass('n-hidden'); g.select = $(this); p.isMultiSelect = false; p.isShowCheckBox = false; g.textFieldID = this.id + "_txt"; g.inputText = $(''); g.inputText.attr("id", g.textFieldID).insertAfter($(this)); } else { //不支持其他类型 return; } if (g.inputText[0].name == undefined) g.inputText[0].name = g.textFieldID; //隐藏域初始化 g.valueField = null; if (p.valueFieldID) { g.valueField = $("#" + p.valueFieldID + ":input"); if (g.valueField.length == 0) g.valueField = $(''); g.valueField[0].id = g.valueField[0].name = p.valueFieldID; } else { g.valueField = $(''); g.valueField[0].id = g.valueField[0].name = g.textFieldID + "_val"; } if (g.valueField[0].name == undefined) g.valueField[0].name = g.valueField[0].id; //开关 g.link = $('
'); //下拉框 if(p.isShowCheckBox && p.isMultiSelect){ g.selectBox = $('
'); g.selectBox.table = $("table:first", g.selectBox); //外层 g.wrapper = g.inputText.wrap('
').parent(); g.wrapper.append('
'); g.wrapper.append(g.link).after(g.selectBox).after(g.valueField); g.inputText.addClass("n-text-field"); if (p.width) { g.wrapper.css({ width: p.width }); g.inputText.css({ width: p.width - 20 }); } if (p.height) { g.wrapper.height(p.height); g.inputText.height(p.height - 2); g.link.height(p.height - 4); } }else{ g.selectBox = $('
'); g.selectBox.table = $("table:first", g.selectBox); //外层 g.wrapper = g.inputText.wrap('
').parent(); g.wrapper.append('
'); g.wrapper.append(g.link).after(g.selectBox).after(g.valueField); g.inputText.addClass("n-text-field"); if (p.width) { g.wrapper.css({ width: p.width }); g.inputText.css({ width: p.width - 20 }); } if (p.height) { g.wrapper.height(p.height); g.inputText.height(p.height - 2); g.link.height(p.height - 4); } } if (p.isShowCheckBox && !g.select) { $("table", g.selectBox).addClass("n-table-checkbox"); } else { p.isShowCheckBox = false; $("table", g.selectBox).addClass("n-table-nocheckbox"); } //调整大小支持 if (p.resize && $.fn.webResizable) { g.selectBox.webResizable({ handles: 'se,s', onStartResize: function() { g.resizing = true; p.onStartResize && onStartResize(); } , onEndResize: function() { g.resizing = false; po.onEndResize && po.onEndResize(); p.onEndResize && p.onEndResize(); } }); g.selectBox.append("
"); } //开关 事件 g.link.hover(function() { this.className = "n-trigger-hover"; }, function() { this.className = "n-trigger"; }).mousedown(function() { this.className = "n-trigger-pressed"; }).mouseup(function() { this.className = "n-trigger-hover"; }).click(function() { if (p.onBeforeOpen && p.onBeforeOpen() == false) return false; po.toggleSelectBox(g.selectBox.is(":visible")); }); g.inputText.click(function() { if (p.onBeforeOpen && p.onBeforeOpen() == false) return false; po.toggleSelectBox(g.selectBox.is(":visible")); }).blur(function() { g.wrapper.removeClass("n-text-focus"); }).focus(function() { g.wrapper.addClass("n-text-focus"); }); g.wrapper.hover(function() { g.wrapper.addClass("n-text-over"); }, function() { g.wrapper.removeClass("n-text-over"); }); g.resizing = false; g.selectBox.hover(null, function(e) { if (p.hideOnLoseFocus && g.selectBox.is(":visible") && !g.boxToggling && !g.resizing) { po.toggleSelectBox(true); } }); //下拉框宽度、高度初始化 if (p.selectBoxWidth) { g.selectBox.width(p.selectBoxWidth); } else { g.selectBox.css('width', g.wrapper.css('width')); } var itemsleng = $("tr", g.selectBox.table).length; if (!p.selectBoxHeight && itemsleng < 8) p.selectBoxHeight = itemsleng * 30; if (p.selectBoxHeight) { g.selectBox.height(p.selectBoxHeight); } //下拉框内容初始化 g.bulidContent(); if (p.render) g.inputText.val(p.render()); if (this.id == undefined) this.id = "WebUI_" + new Date().getTime(); WebUIManagers[this.id + "_ComboBox"] = g; this.usedComboBox = true; }); if (this.length == 0) return null; if (this.length == 1) return WebUIManagers[this[0].id + "_ComboBox"]; var managers = []; this.each(function() { managers.push(WebUIManagers[this.id + "_ComboBox"]); }); return managers; }; })(jQuery);