Now I can use the bootstrap-select

This commit is contained in:
沐见南 2020-04-29 23:16:02 +08:00
parent 515f69dd55
commit 56811702d2
10 changed files with 166 additions and 34 deletions

47
package-lock.json generated
View File

@ -53,6 +53,23 @@
}
}
},
"@types/bootstrap": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-3.4.0.tgz",
"integrity": "sha512-LS05hVAAsX86qbHg7W+ydwBlNHrVCoFw6wEP3/uW4eYmRXl08bWmPeN/+onM+8qZTFfDgUlG/OItJI8SW972oQ==",
"requires": {
"@types/jquery": "*"
}
},
"@types/bootstrap-multiselect": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@types/bootstrap-multiselect/-/bootstrap-multiselect-0.9.0.tgz",
"integrity": "sha512-tJU7V4ORRMdyqA9GoN6KepewlQwKjcCPQC4GrP2cow/ixr1FO6hi4FKfVrgxLg/KnRKCZvJnNthvSXz1y7qqRQ==",
"dev": true,
"requires": {
"@types/jquery": "*"
}
},
"@types/d3": {
"version": "5.7.2",
"resolved": "https://registry.npmjs.org/@types/d3/-/d3-5.7.2.tgz",
@ -286,6 +303,11 @@
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
},
"@types/jquery": {
"version": "2.0.54",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.54.tgz",
"integrity": "sha512-D/PomKwNkDfSKD13DEVQT/pq2TUjN54c6uB341fEZanIzkjfGe7UaFuuaLZbpEiS5j7Wk2MUHAZqZIoECw29lg=="
},
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@ -316,6 +338,26 @@
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
"dev": true
},
"bootstrap": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
"integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA=="
},
"bootstrap-multiselect": {
"version": "0.9.15",
"resolved": "https://registry.npmjs.org/bootstrap-multiselect/-/bootstrap-multiselect-0.9.15.tgz",
"integrity": "sha512-UwF32a0QR82xkEEGpuNrn57Bu0b/7DfCuoiOaziSHfQKFj5arR6c7+MYLs5RiIf3zl4XZ+YnY7ZBi6/EN3vEZA==",
"requires": {
"jquery": "~2.1.3"
},
"dependencies": {
"jquery": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.1.4.tgz",
"integrity": "sha1-IoveaYoMYUMdwmMKahVPFYkNIxc="
}
}
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -774,6 +816,11 @@
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
},
"jquery": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
"integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

View File

@ -9,14 +9,20 @@
"dependencies": {
"@babel/runtime": "7.6.0",
"@babel/runtime-corejs2": "7.6.0",
"@types/bootstrap": "^3.4.0",
"@types/d3": "5.7.2",
"@types/jquery": "^2.0.54",
"bootstrap": "^3.4.1",
"bootstrap-multiselect": "^0.9.15",
"core-js": "3.2.1",
"d3": "5.12.0",
"jquery": "^2.2.4",
"powerbi-models": "^1.3.3",
"powerbi-visuals-api": "~2.6.1",
"powerbi-visuals-utils-dataviewutils": "2.2.1"
},
"devDependencies": {
"@types/bootstrap-multiselect": "^0.9.0",
"ts-loader": "6.1.0",
"tslint": "^5.18.0",
"tslint-microsoft-contrib": "^6.2.0",

View File

@ -5,19 +5,24 @@
"guid": "syinpoSlicer1E14A7D0BD9E4C9B99612FBE9E84697A",
"visualClassName": "Visual",
"version": "1.0.0",
"description": "",
"supportUrl": "",
"gitHubUrl": ""
"description": "A slicer, default selected according to messures.",
"supportUrl": "https://github.com/mujiannan/syinpoSlicer",
"gitHubUrl": "https://github.com/mujiannan/syinpoSlicer"
},
"apiVersion": "2.6.0",
"author": {
"name": "",
"email": ""
"name": "shennan",
"email": "shennan@syinpo.com"
},
"assets": {
"icon": "assets/icon.png"
},
"externalJS": null,
"externalJS": [
"node_modules/jquery/dist/jquery.min.js",
"src/coverJquery.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect.min.js"
],
"style": "style/visual.less",
"capabilities": "capabilities.json",
"dependencies": null,

3
src/coverJquery.js Normal file
View File

@ -0,0 +1,3 @@
var jQuery = typeof jQuery !== 'undefined'
? jQuery
: window['$'];

View File

@ -24,7 +24,7 @@ export class FilterManager implements IFilterManager{
console.debug("filterManager update end, now filter:",this.target);
}
public filterStringField(selection:string[]):void{
console.debug("filterStringField start");
console.debug("filterStringField start:",selection);
let jsonFilter:models.IBasicFilter={
"$schema": "http://powerbi.com/product/schema#basic",
"target": this.target,

View File

@ -1,8 +1,9 @@
"Use strict";
import "../../node_modules/bootstrap/dist/css/bootstrap.css";
import "../../node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css";
import powerbi from "powerbi-visuals-api";
import {ISelectorManager,ISelectorManagerConstructor, IFilterManager} from "../visual/visualInterfaces";
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
/*
@ -60,10 +61,10 @@ abstract class Selector implements ISelector{
this.manager=manager;
this.createView();
}
protected abstract createView();
public abstract dispose();
protected abstract createView():void;
public abstract dispose():void;
protected readonly manager:ISelectorManager;
public abstract update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn);
public abstract update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):void;
}
class DropDownSelector extends Selector{
private dropDown:Selection<HTMLSelectElement>;
@ -78,31 +79,43 @@ class DropDownSelector extends Selector{
public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
console.debug('dropDownViewManager','update start');
let options=this.dropDown.selectAll("option").data(categories.values,function(d){return d.toString();});//map data
options.enter().append("option").text(function(d){return d.toString();});//add
options.enter().append("option").text(function(d){return d.toString();}).attr('dropDown-option');//add
options.exit().remove();//delete
console.debug("dropDown:",this.dropDown);
let filterManager:IFilterManager=this.manager.filterManager;
this.dropDown.on("input change",function(){
console.debug('DropDownSelector:',"input change");
console.debug('this',this);
console.debug('filterManager:',filterManager);
let selectedValues:string[]=[];
for(let i=0;i<this.selectedOptions.length;i++){
let option=this.selectedOptions.item(i);
if(option.selected){
console.debug("option selected",option);
console.debug('option.text:',option.text);
selectedValues.push(option.text);
}
}
if(selectedValues.length==0){
}else{
console.debug("selection.length",selectedValues.length);
filterManager.filterStringField(selectedValues);
}
console.debug("this",this.selectedOptions);
// this.dropDown.on("input change",function(){
// console.debug('DropDownSelector:',"input change");
// console.debug('this',this);
// console.debug('filterManager:',filterManager);
// let selectedValues:string[]=[];
// for(let i=0;i<this.selectedOptions.length;i++){
// let option=this.selectedOptions.item(i);
// if(option.selected){
// console.debug("option selected",option);
// console.debug('option.text:',option.text);
// selectedValues.push(option.text);
// }
// }
// if(selectedValues.length==0){
// }else{
// console.debug("selection.length",selectedValues.length);
// filterManager.filterStringField(selectedValues);
// }
// console.debug("this",this.selectedOptions);
// });
$('.dropDown-selector').multiselect({
onChange:function(){
let selectedValues:string[]=[];
$('option:selected').map(function(a,item){
selectedValues.push(item.textContent);
console.debug('item:',item.textContent);
filterManager.filterStringField(selectedValues);
});
},
maxHeight:100,
includeSelectAllOption:true
});
console.debug('dropDownViewManager','update end');
}
}

View File

@ -0,0 +1,3 @@
/*
In the future, move all selectors here.
*/

View File

@ -1,3 +1,5 @@
@import "/node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "/node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css";
p {
font-size: 20px;
font-weight: bold;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long