请问老师ace admin中的多选组件不能正常使用
来源:7-7 讲师管理功能开发

慕工程7282765
2020-11-16
如图,我一项一项的检查并补全了模板中的css,js引用到本项目的index.html中,但是还是不正常。
我的显示是这样的:
我估计是模板文件中的这段JS没正常执行,如下:
<script type="text/javascript">
jQuery(function($){
var demo1 = $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox({infoTextFiltered: '<span class="label label-purple label-lg">Filtered</span>'});
var container1 = demo1.bootstrapDualListbox('getContainer');
container1.find('.btn').addClass('btn-white btn-info btn-bold');
/**var setRatingColors = function() {
$(this).find('.star-on-png,.star-half-png').addClass('orange2').removeClass('grey');
$(this).find('.star-off-png').removeClass('orange2').addClass('grey');
}*/
$('.rating').raty({
'cancel' : true,
'half': true,
'starType' : 'i'
/**,
'click': function() {
setRatingColors.call(this);
},
'mouseover': function() {
setRatingColors.call(this);
},
'mouseout': function() {
setRatingColors.call(this);
}*/
})//.find('i:not(.star-raty)').addClass('grey');
//////////////////
//select2
$('.select2').css('width','200px').select2({allowClear:true})
$('#select2-multiple-style .btn').on('click', function(e){
var target = $(this).find('input[type=radio]');
var which = parseInt(target.val());
if(which == 2) $('.select2').addClass('tag-input-style');
else $('.select2').removeClass('tag-input-style');
});
//////////////////
$('.multiselect').multiselect({
enableFiltering: true,
enableHTML: true,
buttonClass: 'btn btn-white btn-primary',
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="fa fa-caret-down"></b></button>',
ul: '<ul class="multiselect-container dropdown-menu"></ul>',
filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
li: '<li><a tabindex="0"><label></label></a></li>',
divider: '<li class="multiselect-item divider"></li>',
liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
}
});
///////////////////
//typeahead.js
//example taken from plugin's page at: https://twitter.github.io/typeahead.js/examples/
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object, refer to typeahead docs for more info
matches.push({ value: str });
}
});
cb(matches);
}
}
$('input.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
displayKey: 'value',
source: substringMatcher(ace.vars['US_STATES']),
limit: 10
});
///////////////
//in ajax mode, remove remaining elements before leaving page
$(document).one('ajaxloadstart.page', function(e) {
$('[class*=select2]').remove();
$('select[name="duallistbox_demo1[]"]').bootstrapDualListbox('destroy');
$('.rating').raty('destroy');
$('.multiselect').multiselect('destroy');
});
});
</script>
老师,这段代码要在vue中怎么正常运行呢?我要怎么样才能使用模板中的多选框呢?
写回答
2回答
-
慕工程7282765
提问者
2020-11-17
老师,我是这样添加的,把没用到的组件相关初始化代码去掉了,但是效果没变,浏览器还报了这个错误:
Uncaught TypeError: $(...).multiselect is not a function at HTMLDocument.eval (course.vue?98a3:302) at j (jquery-2.1.4.min.js:2) at Object.fireWith [as resolveWith] (jquery-2.1.4.min.js:2) at Function.ready (jquery-2.1.4.min.js:2) at HTMLDocument.I (jquery-2.1.4.min.js:2)
添加到mounted函数中的代码如下:
jQuery(function($){ ////////////////// $('.multiselect').multiselect({ enableFiltering: true, enableHTML: true, buttonClass: 'btn btn-white btn-primary', templates: { button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="fa fa-caret-down"></b></button>', ul: '<ul class="multiselect-container dropdown-menu"></ul>', filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>', filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>', li: '<li><a tabindex="0"><label></label></a></li>', divider: '<li class="multiselect-item divider"></li>', liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>' } });
00 -
甲蛙
2020-11-17
有些组件是需要初始执行一些js脚本的,像你这个。
可以在你所在的vue页面的mounted方法,把你这段代码加进去,初始化一下
012020-11-17
相似问题
主域名访问的问题
回答 1
vod视频大文件不能正常上传
回答 2