通用复选框

复选框"/>

通用复选框

1. 渲染复选框

select = `<div style="display: inline-block;" class="dictionary_check_box multipleChoiceBox"><label>${this._dictionaryCheck[i]}：</label><div style="position: relative;float: right;" class="_productTypeBox"><div style="position: relative;width: 120px;" class="_inputBox"><i class="icon-input" style="background: url(assets/images/oa/下拉.png) no-repeat;position: absolute;right: 9px;top: 10px;width: 10px;height: 10px;background-size: contain;"></i><input name='${_label[0]}' id="_dictionaryCheck${i}" class="_selectInfo form-control input-sm input-v5" style="background: #fff;width: 120px;"type="text" value="" title="" readonly autocomplete="off"placeholder='请选择${this._dictionaryCheck[i]}'/></div><div class="_pickProType dropdown-menu wkt-scroll"style="padding: 5px 10px;max-height: 200px;overflow-y: auto;min-width: 120px;"><ul></ul></div></div></div>`//获取复选框所有元素this.getCheckData() 

2. 渲染复选框内所有元素

	//获取Dictionary复选框数据getCheckData: async function () {const res = await request(url,query: {},cacheBust: true)let { getMe, say } = res.dataif (say.errMsg == '' && say.statusCode == '0000') {getMe.forEach(function (item) {item = item.replace(/[^0-9]/gi, "");});getMe.sort(compare());function compare() {return function (a, b) {var value1 = a.split(" ")[0];var value2 = b.split(" ")[0];return value1 - value2;};}getMe = Array.from(new Set(getMe));let content = `<li class="inputS single" style="white-space: nowrap;display: flex;align-items: center;"><input type="checkbox" style="margin-top:0px;" eleName="全选"><label for="checkAll"><span title="全选">全选</span></label></li> `for (let j = 0; j < getMe.length; j++) {if (getMe[j].trim() == "") {getMe.splice(j, 1);} else {content += `<li class="inputS single" style="white-space: nowrap;display: flex;align-items: center;"><input type="checkbox" style="margin-top:0px;" eleName="${getMe[j]}"><label for="${getMe[j]}"><span title="${getMe[j]}">${getMe[j]}</span></label></li>`}}this.$el.find('.dictionary_check_box ._pickProType ul').eq(i).append(content)} else {msgUtils.warning(`获取${this._dictionaryCheck[i]}失败!`)}},

3. 绑定复选框的一些相关事件

	//显示复选框showMultiselectBox: function (e) {e.stopPropagation();let that = this;let hideBoxNum = that.$el.find("._pickProType").length;for (let i = 0; i < hideBoxNum; i++) {that.$el.find("._pickProType").eq(i).hide();}$(e.currentTarget).parent().find("._pickProType").show();},//隐藏复选框hideMultiselectBox: function (e) {let that = this;let hideBoxNum = that.$el.find("._pickProType").length;for (let i = 0; i < hideBoxNum; i++) {let pop = $("._pickProType").eq(i);if (!pop.is(e.target) && pop.has(e.target).length === 0) {that.$el.find("._pickProType").eq(i).hide();}}},//复选框勾选事件checkMultiselect: function (e) {e.stopPropagation()const nowEleName = $(e.currentTarget).attr("eleName");const checkStatus = !!$(e.currentTarget).prop("checked");const $Content = $(e.currentTarget).parents("._productTypeBox").find("input._selectInfo[type='text']")const $SelectList = $(e.currentTarget).parents("._pickProType").find(".inputS input")let allData = []$SelectList.each(function () {allData.push($(this).attr('eleName'))});allData.shift()  //去除 '全部' 元素if (nowEleName === "全选") {let inputVal = "";if (checkStatus) {allData.forEach((str, i) => {inputVal += str;i !== allData.length - 1 && (inputVal += ",");})}$Content.val(inputVal)$SelectList.each(function (index, element) {element.checked = checkStatus})} else {let getInput = $Content.val()if (checkStatus) {let newValue = getInput ? `${getInput},${nowEleName}` : nowEleName;$Content.val(newValue)} else {let arr = getInput.split(",");arr.splice(arr.findIndex((v) => v == nowEleName),1);$Content.val(arr.join(","))}}this.queryData()},