select2的学习和jqgrip的学习
select2的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select2的学习</title> <script> remoteToLoadCss('BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/datepicker.css'); remoteToLoadJs('media/js/jquery-1.11.1.js'); remoteToLoadJs('BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/bootstrap-datepicker.js'); remoteToLoadJs('BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/bootstrap-datepicker.zh-CN.min.js'); </script> <script src="../../../js/select2.min.js"></script> <link href="../../../css/select2.min.css" rel="stylesheet"> </head> <body> <div class="col-sm-3"> <div class="control-group"> <label class="control-label">海关关区</label> <div class="controls"> <!--<input type="text" class="form-control col-sm-6" id="cusCustomsCodeText" name="cusCustomsCodeText" v-model="ytEntryDynamicApply.cusCustomsCodeText" placeholder="海关关区"/>--> <select class="form-control col-sm-6" id="cusCustomsCodeText" name="cusCustomsCodeText" v-model="ytEntryDynamicApply.cusCustomsCodeText"> </select> </div> </div> </div> <script> $(function () { $('#cusCustomsCodeText').select2({ placeholder: '请输入您的海关关区', ajax: { url: restServerBaseURL + 'yacht/entryDynamicApply/getCusCustomsCodeText', dataType: 'json', delay: 250, data: function (params) { return { search: params.term, }; }, processResults: function (data) { return { results: data }; }, cache: true }, minimumInputLength: 1 }); }) </script> </body> </html>
整合博客：https://www.cnblogs.com/youmingkuang/p/8669497.html
var selectTelehone; $(function () { selectTelehone = $("#select-telehone"); initSelectTelephone(); }); function initSelectTelephone() { selectTelehone.select2({ ajax: { url: function (params) { return "/PartyA/Telephone/SearchByShortNumber?partyACompanyId=" + partyACompanyId + '&TelephoneNumber=' + params.term; }, dataType: 'json', processResults: function (data, params) { for (var i = 0; i < data.length; i++) { data[i].id = data[i].Id; data[i].text = data[i].TelephoneNumber; } return { results: data }; }, cache: true }, allowClear: true, //选中之后，可手动点击删除 placeholder: "输入号码搜索...", escapeMarkup: function (markup) { return markup; }, // 让template的html显示效果，否则输出代码 minimumInputLength: 2, //搜索框至少要输入的长度，此处设置后需输入才显示结果 language: "zh-CN", //中文 templateResult: formatTelehoneNumber, // 自定义下拉选项的样式模板 templateSelection: formatTelehoneNumberSelection // 自定义选中选项的样式模板 }); selectTelehone.on("select2:select", function (evt) { //这里是选中触发的事件 //evt.params.data 是选中项的信息 }); selectTelehone.on("select2:unselect", function (evt) { //这里是取消选中触发的事件 //如配置allowClear: true后，触发 }); } function formatTelehoneNumber(item) { if (item.loading) return item; var markup = '<div> <p class="text-primary">电话号码：' + item.TelephoneNumber + '</p>'; //markup += '这里可以添加其他选项...'; markup += ' </div>'; return markup; } function formatTelehoneNumberSelection(item) { if (item.TelephoneNumber) { return item.TelephoneNumber; } else { return "输入号码搜索..."; } }
$("#id")..unbind("change").bind("change", function () { //变更事件 }); $("#id").select2().val(null).trigger("change");//如无业务需求也可不使用trigger("change") $("#id").find("option").remove();//清除搜索时输入的文字，默认会被记下、此操作仅在查询使用ajax时使用 //以下清空选中/赋值文本，但是无清空选中项的值 //$("#select2-select-telehone-container")的‘select-telehone’为select的ID值 $("#select2-select-telehone-container").closest('.select2-container--below').addClass("select2-container--focus").removeClass("select2-container--below");//清除当前被选中的文本 $("#select2-select-telehone-container").prop("title", '');//清除当前被选中的title属性，也可使用removeAttr('title') $("#select2-select-telehone-container").html('<span class="select2-selection__placeholder">默认提示文本</span>')； //也可使用html('')清除当前被选中的文本
jqgrip的学习网：https://blog.mn886.net/jqGrid/
