vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Demo update

pull/435/head
cagataycivici 2020-08-05 16:37:02 +03:00
parent d7e7ec9652
commit 370dd15f9a
1 changed files with 46 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/treetable/TreeTableFilterDemo.vue
View File

@ -10,26 +10,28 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Lenient Filter</h5> <h5>Lenient Filter</h5>
<TreeTable :value="nodes" :filters="filters" filterMode="lenient"> <TreeTable :value="nodes" :filters="filters1" filterMode="lenient">
<template #header> <template #header>
<div style="text-align: right"> <div class="p-text-right">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i> <div class="p-input-icon-left">
<InputText v-model="filters['global']" placeholder="Global Search" size="50" /> <i class="pi pi-search"></i>
<InputText v-model="filters1['global']" placeholder="Global Search" size="50" />
</div>
</div> </div>
</template> </template>
<Column field="name" header="Name" :expander="true"> <Column field="name" header="Name" :expander="true">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" /> <InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name" />
</template> </template>
</Column> </Column>
<Column field="size" header="Size"> <Column field="size" header="Size">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size"/> <InputText type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"/>
</template> </template>
</Column> </Column>
<Column field="type" header="Type"> <Column field="type" header="Type">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type"/> <InputText type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"/>
</template> </template>
</Column> </Column>
</TreeTable> </TreeTable>
@ -37,26 +39,28 @@
<div class="card"> <div class="card">
<h5>Strict Filter</h5> <h5>Strict Filter</h5>
<TreeTable :value="nodes" :filters="filters" filterMode="strict"> <TreeTable :value="nodes" :filters="filters2" filterMode="strict">
<template #header> <template #header>
<div style="text-align: right"> <div class="p-text-right">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i> <div class="p-input-icon-left">
<InputText v-model="filters['global']" placeholder="Global Search" size="50" /> <i class="pi pi-search"></i>
<InputText v-model="filters2['global']" placeholder="Global Search" size="50" />
</div>
</div> </div>
</template> </template>
<Column field="name" header="Name" :expander="true"> <Column field="name" header="Name" :expander="true">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" /> <InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name" />
</template> </template>
</Column> </Column>
<Column field="size" header="Size"> <Column field="size" header="Size">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size" /> <InputText type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size" />
</template> </template>
</Column> </Column>
<Column field="type" header="Type"> <Column field="type" header="Type">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type" /> <InputText type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type" />
</template> </template>
</Column> </Column>
</TreeTable> </TreeTable>
@ -68,55 +72,63 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Lenient Filter&lt;/h3&gt; &lt;div class="card"&gt;
&lt;TreeTable :value="nodes" :filters="filters" filterMode="lenient"&gt; &lt;h5&gt;Lenient Filter&lt;/h5&gt;
&lt;TreeTable :value="nodes" :filters="filters1" filterMode="lenient"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="text-align: right"&gt; &lt;div class="p-text-right"&gt;
&lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt; &lt;div class="p-input-icon-left"&gt;
&lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt; &lt;i class="pi pi-search"&gt;&lt;/i&gt;
&lt;InputText v-model="filters1['global']" placeholder="Global Search" size="50" /&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="name" header="Name" :expander="true"&gt; &lt;Column field="name" header="Name" :expander="true"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" /&gt; &lt;InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="size" header="Size"&gt; &lt;Column field="size" header="Size"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size" /&gt; &lt;InputText type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="type" header="Type"&gt; &lt;Column field="type" header="Type"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type" /&gt; &lt;InputText type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;/TreeTable&gt; &lt;/TreeTable&gt;
&lt;/div&gt;
&lt;h3&gt;Strict Filter&lt;/h3&gt; &lt;div class="card"&gt;
&lt;TreeTable :value="nodes" :filters="filters" filterMode="strict"&gt; &lt;h5&gt;Strict Filter&lt;/h5&gt;
&lt;TreeTable :value="nodes" :filters="filters2" filterMode="strict"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="text-align: right"&gt; &lt;div class="p-text-right"&gt;
&lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt; &lt;div class="p-input-icon-left"&gt;
&lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt; &lt;i class="pi pi-search"&gt;&lt;/i&gt;
&lt;InputText v-model="filters2['global']" placeholder="Global Search" size="50" /&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="name" header="Name" :expander="true"&gt; &lt;Column field="name" header="Name" :expander="true"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" /&gt; &lt;InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="size" header="Size"&gt; &lt;Column field="size" header="Size"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size" /&gt; &lt;InputText type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="type" header="Type"&gt; &lt;Column field="type" header="Type"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type" /&gt; &lt;InputText type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;/TreeTable&gt; &lt;/TreeTable&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
@ -126,7 +138,8 @@ import NodeService from '../../service/NodeService';
export default { export default {
data() { data() {
return { return {
filters: {}, filters1: {},
filters2: {},
nodes: null nodes: null
} }
}, },
@ -152,7 +165,8 @@ import NodeService from '../../service/NodeService';
export default { export default {
data() { data() {
return { return {
filters: {}, filters1: {},
filters2: {},
nodes: null nodes: null
} }
}, },