isu-elements
Version:
Polymer components for building web apps.
147 lines (133 loc) • 6.08 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>isu-picker demo</title>
<script type="text/javascript" src="../../utils/mock_setup.js"></script>
<script type="module">
import '../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js';
import '../../node_modules/@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '../../node_modules/@polymer/iron-demo-helpers/demo-snippet.js';
import '../../isu-select-tree';
import '../../isu-select-tree-new';
import '../../isu-input';
if (!window.location.href.endsWith("?mock=mockData.js")) {
window.location.href = window.location.href + "?mock=mockData.js";
}
</script>
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
.centered {
min-width: 800px;
}
demo-snippet {
--demo-snippet-code: {
max-height: 500px;
}
}
#picker6 {
--isu-picker-input-width: 170px;
--isu-picker-tags-box-width: 180px;
}
isu-picker {
margin-bottom: 10px;
}
</style>
</custom-style>`;
document.body.appendChild($_documentContainer.content);
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>isu-select-tree Demo,只支持单选</h3>
<demo-snippet>
<template>
<isu-select-tree id="orgtree" label="组织(模拟url)" font-size="small" placeholder="请选择" src="/init.do" value="2111"></isu-select-tree>
<isu-select-tree id="orgtree2" label="组织（传入数据）" placeholder="请选择" value="21"></isu-select-tree>
<isu-select-tree id="orgtree3" label="选项rdaio" placeholder="请选择" src="/init.do" value="2111" show-radio></isu-select-tree>
<isu-select-tree id="orgtree4" label="显示搜索框" placeholder="请选择" src="/init.do" value="2111" show-search-input></isu-select-tree>
<script>
orgtree2.data = [
{ id: 1, label: '第1个', children: [
{ id: 11, label: '二级第1个', children: [] },
{ id: 12, label: '二级第2个', children: [] },
{ id: 13, label: '二级第3个', children: [] },
{ id: 14, label: '二级第4个', children: [] },
{ id: 15, label: '二级第5个', children: [] }
] },
{
id: 2,
label: '第2个',
children: [
{
id: 21,
label: '二级第1个',
showSlotBefore: true,
showSlotAfter: true,
slotefault: true,
showLevel1: true,
level2Show: true,
children: [
{
id: 211,
label: '三级1第1个',
showLevel2:true,
children: [
{ id: 2111, label: '1', children: [] },
{ id: 2112, label: '2', checked: true, children: [] },
{ id: 2113, label: '3', children: [] },
{ id: 2114, label: '4', children: [] },
{ id: 2115, label: '5', children: [] }
]
},
{ id: 212, label: '三级2第2个', disabled: true, children: [] },
{ id: 213, label: '三级3第3个', children: [] },
{ id: 214, label: '三级4第4个', children: [] },
{ id: 215, label: '三级5第5个', children: [] }
]
},
{ id: 22, label: '二级第2个', children: [] },
{ id: 23, label: '二级第3个', children: [] },
{ id: 24, label: '二级第4个', children: [] },
{ id: 25, label: '二级第5个', children: [] }
]
},
{ id: 3, label: '第3个', children: [{
id: 31,
label: '三级第1个'}, {
id: 32,
label: '三级第2个'}] },
{ id: 4, label: '第4个', children: [] },
{ id: 5, label: '第5个', children: [] }
]
</script>
</template>
</demo-snippet>
<h3>isu-select-tree-new Demo,支持单选、多选、输入关键字过滤下拉选项</h3>
<demo-snippet>
<template>
<isu-select-tree-new id="neworgtree1" label="单选" placeholder="请选择" src="/init.do" show-search-input
value="2111"></isu-select-tree-new>
<isu-select-tree-new id="neworgtree2" label="多选" placeholder="请选择" src="/init.do" show-all
multi value="3,31,32"></isu-select-tree-new>
<isu-select-tree-new id="neworgtree3" label="多选有搜索框" placeholder="请选择" src="/init.do" show-search-input
multi value="3,31,32"></isu-select-tree-new>
<isu-select-tree-new id="neworgtree4" label="仅显示3、4层级" placeholder="请选择" src="/init.do" show-search-input
multi only-select-level="3,4"></isu-select-tree-new>
<isu-select-tree-new id="neworgtree5" label="仅显示3、4层级，初始化数据" placeholder="请选择" src="/init.do" show-search-input
multi only-select-level="3,4" init-filter-value="2111,2115"
></isu-select-tree-new>
<isu-select-tree-new id="neworgtree6" label="(只读）" placeholder="请选择" src="/init.do"
multi value="3,31,32" readonly></isu-select-tree-new>
<isu-select-tree-new id="neworgtree7" label="(只读，isView）" placeholder="请选择" src="/init.do"
multi value="3,31,32" readonly is-view></isu-select-tree-new>
<script>
</script>
</template>
</demo-snippet>
</div>
</body>
</html>