| | |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/basic.css" />
|
|---|
| | | <link rel="stylesheet" href="css/common.css">
|
|---|
| | | <link rel="stylesheet" href="pages/css/common.css">
|
|---|
| | | <link rel="stylesheet" href="pages/css/mylayui.css">
|
|---|
| | | <style type="text/css">
|
|---|
| | | html, body {
|
|---|
| | | height: 100%;
|
|---|
| | |
|---|
| | | </div>
|
|---|
| | | <div class="layui-input-inline">
|
|---|
| | | <div class="layui-form" lay-filter="groupFilter">
|
|---|
| | | <select name="group" id="group" lay-filter="group" lay-search="">
|
|---|
| | | <select name="group" id="group" lay-filter="group">
|
|---|
| | | <option value="">请选择电池组</option>
|
|---|
| | | </select>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <button class="layui-btn layui-btn-sm layui-btn-normal" id="search"><i class="fa fa-search"></i> 查询</button>
|
|---|
| | | <button class="layui-btn layui-btn-sm" id="search"><i class="fa fa-search"></i> 查询</button>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | </div>
|
|---|
| | |
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div id="setMatchGroupData"></div>
|
|---|
| | | <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
|
|---|
| | | <script type="text/javascript" src="jqueryui/jquery-ui.min.js"></script>
|
|---|
| | | <script type="text/javascript" src="src/layui.js"></script>
|
|---|
| | | <script type="text/javascript" src="pages/js/mylayui.js"></script>
|
|---|
| | | <script type="text/html" id="toolBar">
|
|---|
| | | <a class="layui-btn layui-btn-xs" lay-event="replace">更换</a>
|
|---|
| | | </script>
|
|---|
| | |
|---|
| | | ,{field:'brandname', title:'品牌名称', align:'center'}
|
|---|
| | | ,{field:'nominalcap', title:'标称容量', align:'center'}
|
|---|
| | | ,{field:'monvol', title:'标称电压（V）', align:'center'}
|
|---|
| | | ,{field:'relcap', title:'实际容量', align:'center'}
|
|---|
| | | ,{field:'percap', title:'容量百分比(%)', align:'center'}
|
|---|
| | | ,{fixed: 'right', title:'操作', toolbar: '#toolBar', width: 70}
|
|---|
| | | ]]
|
|---|
| | | ,data:[]
|
|---|
| | |
|---|
| | |
|
|---|
| | | // 点击查询根据查询条件获取电池组的单体列表
|
|---|
| | | $('#search').click(function() {
|
|---|
| | | var data = [{stationname: 'xxx'},{stationname: 'enen'}];
|
|---|
| | | var num = data.length;
|
|---|
| | | tOptions.data = data;
|
|---|
| | | // 设置分页信息
|
|---|
| | | // tOptions.page.layout = ['count', 'prev', 'page', 'next']; //自定义分页布局
|
|---|
| | | tOptions.page.limit = num;
|
|---|
| | | tOptions.page.limits = [num];
|
|---|
| | | // 重新绘制表格
|
|---|
| | | table.reload('groupTbl', tOptions);
|
|---|
| | | var groupData = $('#group').find('option:selected').data('data');
|
|---|
| | | // 判断是否已经选中电池组
|
|---|
| | | if(groupData) {
|
|---|
| | | $('#setMatchGroupData')
|
|---|
| | | console.log(groupData);
|
|---|
| | | tOptions.data = [{}];
|
|---|
| | | table.render(tOptions);
|
|---|
| | | }else {
|
|---|
| | | tOptions.data = [];
|
|---|
| | | table.render(tOptions);
|
|---|
| | | layer.msg('请选择一组电池');
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 点击表格工具栏更换
|
|---|
| | |
|---|
| | | var event = obj.event;
|
|---|
| | | switch(event) {
|
|---|
| | | case 'replace':
|
|---|
| | | showReplacePanel();
|
|---|
| | | showReplacePanel(obj.data);
|
|---|
| | | break;
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 显示更换电池单体面板
|
|---|
| | | function showReplacePanel() {
|
|---|
| | | |
|---|
| | | function showReplacePanel(obj) {
|
|---|
| | | $('#setMatchGroupData').data('data', obj);
|
|---|
| | | |
|---|
| | | // 显示面板
|
|---|
| | | layer.open({
|
|---|
| | | type: 2,
|
|---|
| | | title: '更换电池',
|
|---|
| | | area: ['1200px', '500px'],
|
|---|
| | | fixed: false, //不固定
|
|---|
| | | maxmin: true,
|
|---|
| | | content: 'iframe/set-match-group.html'
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 查询省下拉框
|
|---|
| | |
|---|
| | | var ele = $('#province'); // 目标select
|
|---|
| | | if(rs.code == 1) {
|
|---|
| | | var data = rs.data;
|
|---|
| | | list.push(getLayuiSelect('请选择省/直辖市', '', {}, {}));
|
|---|
| | | list.push(getLayuiSelect('请选择省/直辖市', '', {}, undefined));
|
|---|
| | | // 遍历查询结果
|
|---|
| | | for(var i=0; i<data.length; i++) {
|
|---|
| | | var _data = data[i];
|
|---|
| | |
|---|
| | | list.push(_tmp);
|
|---|
| | | }
|
|---|
| | | }else {
|
|---|
| | | list.push(getLayuiSelect('暂无省/直辖市', '', {}, {}));
|
|---|
| | | list.push(getLayuiSelect('暂无省/直辖市', '', {}, undefined));
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 根据对象数组生成下拉列表
|
|---|
| | |
|---|
| | | var ele = $('#city'); // 目标select
|
|---|
| | | if(rs.code == 1) {
|
|---|
| | | var data = rs.data;
|
|---|
| | | list.push(getLayuiSelect('请选择市/区', '', {}, {}));
|
|---|
| | | list.push(getLayuiSelect('请选择市/区', '', {}, undefined));
|
|---|
| | | // 遍历查询结果
|
|---|
| | | for(var i=0; i<data.length; i++) {
|
|---|
| | | var _data = data[i];
|
|---|
| | |
|---|
| | | list.push(_tmp);
|
|---|
| | | }
|
|---|
| | | }else {
|
|---|
| | | list.push(getLayuiSelect('暂无市/区', '', {}, {}));
|
|---|
| | | list.push(getLayuiSelect('暂无市/区', '', {}, undefined));
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 根据对象数组生成下拉列表
|
|---|
| | |
|---|
| | | var ele = $('#home'); // 目标select
|
|---|
| | | if(rs.code == 1) {
|
|---|
| | | var data = rs.data;
|
|---|
| | | list.push(getLayuiSelect('请选择机房', '', {StationId: ''}, {}));
|
|---|
| | | list.push(getLayuiSelect('请选择机房', '', {StationId: ''}, undefined));
|
|---|
| | | // 遍历查询结果
|
|---|
| | | for(var i=0; i<data.length; i++) {
|
|---|
| | | var _data = data[i];
|
|---|
| | |
|---|
| | | list.push(_tmp);
|
|---|
| | | }
|
|---|
| | | }else {
|
|---|
| | | list.push(getLayuiSelect('暂无机房', '', {}, {}));
|
|---|
| | | list.push(getLayuiSelect('暂无机房', '', {}, undefined));
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 根据对象数组生成下拉列表
|
|---|
| | |
|---|
| | | var ele = $('#group'); // 目标select
|
|---|
| | | if(rs.code == 1) {
|
|---|
| | | var data = rs.data;
|
|---|
| | | list.push(getLayuiSelect('请选择电池组', '0', {}, {}));
|
|---|
| | | list.push(getLayuiSelect('请选择电池组', '', {}, undefined));
|
|---|
| | | // 遍历查询结果
|
|---|
| | | for(var i=0; i<data.length; i++) {
|
|---|
| | | var _data = data[i];
|
|---|
| | |
|---|
| | | list.push(_tmp);
|
|---|
| | | }
|
|---|
| | | }else {
|
|---|
| | | list.push(getLayuiSelect('暂无机房', '', {}, {}));
|
|---|
| | | list.push(getLayuiSelect('暂无机房', '', {}, undefined));
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 根据对象数组生成下拉列表
|
|---|
| | |
|---|
| | | form.render('select', 'groupFilter');
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | // 生成特定的select列表
|
|---|
| | | function createLayuiSelect(ele, list) {
|
|---|
| | | // 清空内容
|
|---|
| | | ele.text('');
|
|---|
| | | // 遍历list结果集生成下拉
|
|---|
| | | for(var i=0; i<list.length; i++) {
|
|---|
| | | var _list = list[i];
|
|---|
| | | var option = $('<option></option>'); // option元素
|
|---|
| | | // 设置option的文本/属性值/data值
|
|---|
| | | option.text(_list.txt);
|
|---|
| | | option.val(_list.val);
|
|---|
| | | option.data('data', _list.data);
|
|---|
| | | Object.keys(_list.attr).forEach(function(key){
|
|---|
| | | var val = _list.attr[key];
|
|---|
| | | option.attr(key, val);
|
|---|
| | | });
|
|---|
| | | ele.append(option);
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | // 构造生成select列表的对象数组
|
|---|
| | | function getLayuiSelect(txt, val, attr, data) {
|
|---|
| | | var obj = {
|
|---|
| | | val: '',
|
|---|
| | | txt: '',
|
|---|
| | | attr: {},
|
|---|
| | | data: {}
|
|---|
| | | };
|
|---|
| | | |
|---|
| | | // 设置内容的值
|
|---|
| | | obj.val = val; // option的value值
|
|---|
| | | obj.txt = txt; // option的文本值 |
|---|
| | | obj.attr = attr; // option的自定义的属性
|
|---|
| | | obj.data = data; // option的data值
|
|---|
| | | |
|---|
| | | // 返回构造的对象
|
|---|
| | | return obj;
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | </script>
|
|---|
