精华内容
下载资源
问答
  • 区域联动压风机监控系统是针对煤矿压风机系统的分布特点、工艺流程及运行特点、监控要求而设计的。基于PIC单片机为核心的KXJ220控制器,适用于煤矿有瓦斯及煤尘爆炸危险的场所,选用西门子WINCC为上位机软件核心,并且...
  • 基于门块区域联动的保温门控制方案研究,阎钰洁,吕博,以一种由电推杆驱动门块工作的保温门为例,划分了多门块工作组,建立了分组区域联动控制结构并设计了控制逻辑,实现了不同工况下
  • 针对矿井通风异常情况下应急决策与智能调控水平不高、无法实现风烟流远程控制的现状,设计了矿井火灾风烟流区域联动与智能调控系统;结合通风网络结构,分析了火灾时期风烟流区域联动控制机理,即通过设置烟雾传感器...
  • 基于layui的select区域联动 要实现联动效果注意两点: 第一要可以监听到select的change事件; 第二异步加载的内容,需要重新渲染后才可以 正常使用。 Html结构: <div class="x-body"> <form class=...

    基于layui的select区域联动

    要实现联动效果注意两点:

    第一要可以监听到select的change事件;

    第二异步加载的内容,需要重新渲染后才可以 正常使用。

    Html结构:

    <div class="x-body">
        <form class="layui-form" action="" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">选择地区</label>
                <div class="layui-input-inline">
                    <select name="province" lay-filter="province" id="s_p">
                        <option value="1">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="city" lay-filter="city" id="s_c">
                        <option value="1">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="area" lay-filter="area" id="s_x">
                        <option value="1">请选择区/县</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="layui-form-label">选择地区</label>
                <div class="layui-input-inline">
                    <select name="towns" lay-filter="towns" id="s_t">
                        <option value="1">请选择乡镇/街道</option>
                    </select>
                </div>
                <!--<div class="layui-input-inline">-->
                    <!--<select name="burg" lay-filter="burg" id="s_b">-->
                        <!--<option value="1">庄/村</option>-->
                    <!--</select>-->
                <!--</div>-->
            </div>
        </form>
    </div>

    Js:

    <script type="text/javascript">
    
        layui.use(['form', 'layer', 'laytpl', 'jquery'], function () {
            var form = layui.form
                , $ = layui.jquery;
    
            var parentId = '0';
            $(function () {
                $.post(serverPath + "sys/area/backProvince/" + parentId, function (result) {
                    var p = result;
                    for (v in p) {
                        var pp = p[v].id;
                        $("#s_p").append("<option value=" + pp + ">" + p[v].fullname + "</option>")
                    }
                    form.render();
                })
    
                form.on('select(province)', function (data) {
                    var p = $("#s_p").val();
                    if (p != "1") {
                        $.post(serverPath + "sys/area/backProvince/" + p, function (result) {
                            var c = result;
                            $("#s_c").html("");
                            $("#s_c").append("<option value='1'>请选择市</option>");
                            $("#s_x").html("");
                            $("#s_x").append("<option value='1'>请选择县/区</option>");
                            $("#s_t").html("");
                            $("#s_t").append("<option value='1'>请选择乡镇/街道</option>");
                            $("#s_b").html("");
                            $("#s_b").append("<option value='1'>请选择村/街道号</option>");
                            for (v in c) {
                                var cc = c[v].id;
                                $("#s_c").append("<option value=" + cc + ">" + c[v].fullname + "</option>")
                            }
                            form.render();
                        })
                    }
                });
                form.on('select(city)', function (data) {
                    var c = $("#s_c").val();
                    if (c != "1") {
                        $.post(serverPath + "sys/area/backProvince/" + c, function (result) {
                            var x = result;
                            $("#s_x").html("");
                            $("#s_x").append("<option value='1'>请选择县/区</option>");
                            $("#s_t").html("");
                            $("#s_t").append("<option value='1'>请选择乡镇/街道</option>");
                            $("#s_b").html("");
                            $("#s_b").append("<option value='1'>请选择村/街道号</option>");
                            for (v in x) {
                                var xx = x[v].id;
    
                                $("#s_x").append("<option value=" + xx + ">" + x[v].fullname + "</option>")
                            }
                            form.render();
                        });
                    }
                });
                form.on('select(area)', function (data) {
                    var x = $("#s_x").val();
                    if (x != "1") {
                        $.post(serverPath + 'sys/area/backProvince/'+ x, function (result) {
                            var t = result;
                            $("#s_t").html("");
                            $("#s_t").append("<option value='1'>请选择乡镇/街道</option>");
                            $("#s_b").html("");
                            $("#s_b").append("<option value='1'>请选择村/街道号</option>");
                            for (v in t) {
                                var xx = t[v].id;
                                $("#s_t").append("<option value=" + xx + ">" + t[v].fullname + "</option>")
                            }
                            form.render();
                        });
                    }
                });
    
    
            });
        });
    
    
    </script>

    总结:

    1.select的chage监听事件使用

    form.on('select(myselect)', function(data){}) 其中myselect是select的 lay-filter属性值

    2.数据异步加载到select的option中之后,点击该select会发现layui的选中效果不起作用,需要使用form.render('select');重新渲染一次,就可以正常使用。

    转自:https:://my.oschina.net/zhenggao/blog/1818602

    展开全文
  • 针对城市道路交通中的区域联动控制问题, 利用交通物联网所提供的实时交通信息以及不同交通控制节点之间的关联关系, 构建符合区域协调控制要求的交通云计算平台, 使得道路交通各交叉口之间的控制策略由云计算平台统一...
  • 区域联动自定义

    2018-12-11 12:28:42
    因项目需要,区域需要实现效果中的结果,select的option无法自定义,故通过自定义的div来实现该区域框。具体代码如下: html &lt;div class="service-list"&gt; &lt;div class="col-...

    因项目需要,区域需要实现效果中的结果,select的option无法自定义,故通过自定义的div来实现该区域框。具体代码如下:

    html

    <div class="service-list">
        <div class="col-xs-12 overflow marginB20 no-padding text-bg-write">
            <div class="al-common-tabs">
                <div class="al-tabs-choose" ng-click="choose()">
                    <span class="font-bolder" style="pointer-events: none;">当前单位:</span>
                    <span class="text-0 cursorPointer" ng-show="newReqInfo.cityName==null">{{newReqInfo.provinceName}}</span>
                    <span class="text-0 cursorPointer" ng-show="newReqInfo.cityName!=null">{{newReqInfo.cityName}}</span>
                    <span class="al-tabs-arrow"></span>
                </div>
            </div>
        </div>
        <!--区域框-->
        <div class="onlineSearchArea" ng-if="SearchArea">
            <div class="col-xs-12 no-padding">
                <div class="col-xs-11 no-left-padding text-blue text-font16">选择单位</div>
                <div class="topArrow" ng-click="choose('0')"></div>
            </div>
            <div class="col-xs-12 areaShow">
                <div class="col-xs-3 no-left-padding marginT10" ng-click="againProvince()">
                    <span class="cursorPointer" ng-show="newReqInfo.nextProvinceName==null || newReqInfo.nextProvinceName=='' || newReqInfo.nextProvinceName=='undefined'">请选择</span>
                    <span>{{newReqInfo.nextProvinceName}}</span>
                </div>
                <div class="col-xs-4 no-padding marginT10" ng-click="againCity()">
                    <span class="cursorPointer" ng-show="showPower">请选择</span>
                    {{newReqInfo.nextCityName}}
                </div>
                <div class="col-xs-3 no-padding">
                    <!--预留第三级区域-->
                </div>
                <button class="col-xs-2 btn btn-primary" ng-click="choose('1')">确定</button>
            </div>
            <div class="col-xs-12 no-padding marginT10">
                <div class="col-xs-3 marginT10 padding2" ng-repeat="p in provinces" ng-show="!showCity || newReqInfo.nextProvince=='nw'">
                    <div class="area-set text-bg-write" ng-click="changeProvince(p)">{{p.name}}</div>
                </div>
    
                <div class="col-xs-3 marginT10 padding2" ng-repeat="c in cities" ng-show="showCity">
                    <div class="area-set text-bg-write" ng-click="changeCity(c)">{{c.name}}</div>
                </div>
            </div>
        </div>
    </div>

    js

    var loginUser = JSON.parse(sessionStorage.loginUser);
    if (CommonUtils.checkNull(loginUser)) {
        alert("登录信息失效");
        location.href = "login.html";
    }
    
    $scope.srchParams = {};
    $scope.newReqInfo = {};
    $scope.userServiceForm = {};
    $scope.SearchArea = false;
    //选择区域之后的确定
    $scope.choose = function (type) {
        if ($scope.SearchArea) {
            $scope.SearchArea = false;
            if (type == '1') {
                if($scope.newReqInfo.nextProvince||$scope.newReqInfo.nextCityCode){
                    $scope.newReqInfo.province = $scope.newReqInfo.nextProvince;
                    $scope.newReqInfo.provinceName = $scope.newReqInfo.nextProvinceName;
                    if ($scope.newReqInfo.nextCityName && $scope.newReqInfo.nextCityCode) {
                        $scope.newReqInfo.cityCode = $scope.newReqInfo.nextCityCode;
                        $scope.newReqInfo.cityName = $scope.newReqInfo.nextCityName;
                    } else {
                        $scope.newReqInfo.cityCode = null;
                        $scope.newReqInfo.cityName = null;
                    }
                    if ($scope.newReqInfo.cityCode || checkInArray(["gz", "sz"], $scope.newReqInfo.province)) {
                        $scope.isHideaAttentionRoundChart = true;
                    } else {
                        $scope.isHideaAttentionRoundChart = false;
                    }
    
                    $scope.userServiceForm.provinceCode = $scope.newReqInfo.province;
                    $scope.userServiceForm.cityCode = $scope.newReqInfo.cityCode;
                }
            }
        } else {
            $scope.SearchArea = true;
        }
    }
    //改变省级
    $scope.changeProvince = function (p) {
        if (checkNull(p)) {
            return;
        }
        $scope.newReqInfo.nextProvince = p.code;
        $scope.newReqInfo.nextProvinceName = p.name;
    
        if (checkInArray(["nw", "gz", "sz"], $scope.newReqInfo.nextProvince)) {
            $scope.showCity = false;
        } else {
            SyspropertyService.getGroupData({
                type: '3',
                parentCode: $scope.newReqInfo.nextProvince
            }, function (responseData) {
                $scope.newReqInfo.nextCityName = "";
                $scope.newReqInfo.nextCityCode = "";
    
                $scope.cities = responseData.data;
                $scope.srchParams.city = '0';
                $scope.showCity = true;
            })
        }
    }
    //改变市级
    $scope.changeCity = function (c) {
        if (checkNull(c)) {
            return;
        }
    
        $scope.showPower = false;
        $scope.newReqInfo.nextCityName = c.name;
        $scope.newReqInfo.nextCityCode = c.code;
    }
    //重新选择
    $scope.againProvince = function () {
        if(loginUser.group.level == '3'){
            return;
        }
        $scope.newReqInfo.nextCityName = "";
        $scope.newReqInfo.nextCityCode = "";
        $scope.newReqInfo.nextProvince = "";
        $scope.newReqInfo.nextProvinceName = "";
        $scope.showCity = false;
        $scope.showPower = false;
    }
    $scope.againCity = function () {
        if(loginUser.group.level == '3'){
            return;
        }
        $scope.newReqInfo.nextCityName = "";
        $scope.newReqInfo.nextCityCode = "";
        $scope.showPower = true;
    }
    
    SyspropertyService.getGroupData({type: '4'}, function (responseData) {
        if (responseData.status == '00') {
            if (loginUser.group.level == '1' || loginUser.group.level == '2') {
                $scope.provinces = responseData.data;
                $scope.srchParams.province = $scope.provinces[0].code;
                $scope.newReqInfo.province = $scope.provinces[0].code;
                $scope.newReqInfo.provinceName = $scope.provinces[0].name;
                $scope.userServiceForm.provinceCode = $scope.provinces[0].code;
            } else if (loginUser.group.level == '3') {
                $scope.cities = responseData.data;
                $scope.srchParams.city = $scope.cities[0].code;
                $scope.newReqInfo.cityName = $scope.cities[0].name;
                $scope.newReqInfo.cityCode = $scope.cities[0].code;
                $scope.newReqInfo.province = $scope.cities[0].provinceCode;
                $scope.userServiceForm.provinceCode =  $scope.newReqInfo.province ;
                $scope.newReqInfo.nextProvince=$scope.newReqInfo.province;
                $scope.userServiceForm.cityCode =    $scope.newReqInfo.cityCode ;
                $scope.newReqInfo.nextCityCode =   $scope.newReqInfo.cityCode;
                $scope.newReqInfo.nextCityName =   $scope.newReqInfo.cityName;
                SyspropertyService.getGroupData({type: '6',parentCode:$scope.cities[0].parentId}, function (resp2) {
                    if (resp2.status == '00') {
                        $scope.newReqInfo.provinceName=resp2.data.name;
                        $scope.newReqInfo.nextProvinceName=resp2.data.name;
                    }
                });
            }
    
        }
    
    });
    

     css

    /*适用于单个tab*/
    .al-common-tabs,.structure-common-tab,.system-common-tabs{
        width: 100%;
        overflow: hidden;
    }
    .al-common-tabs>span{
        padding: 0 15px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        display: inline-block;
        margin: 0 10px;
        cursor: pointer;
    }
    .al-common-tabs>span:first-child{
        margin-left: 0 !important;
        cursor: default;
    }
    .al-tabs-choose{
        display: inline-block;
        float: right;
        line-height: 50px;
        margin-right: 20px;
        color: #999;
    }
    .al-tabs-arrow{
        width:0px;
        height:0px;
        border: 6.6px solid transparent;
        border-top-color: #999;
        content:'';
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }
    .onlineSearchArea{
        position: absolute;
        top: 70px;
        right: 5px;
        display: block !important;
        width: 520px !important;
        background: #F2F2F2;
        text-indent: 5px;
        z-index: 10;
        padding: 10px 10px 30px;
    }

    实现效果如下:

    注:此为个人笔记及总结,有误或有更好的解决方案请指正!谢谢 

    展开全文
  • 课程二十二:如何制作区域联动 说明:对于区域联动,主要是用来在同一个页面,依据主报表中的数据,获取更详细的信息以图表的形式在同一个页面显示出来,用于参考 步骤一:创建一个子报表(参考课程二十一:子报表...

    课程二十二:如何制作区域联动

    说明:对于区域联动,主要是用来在同一个页面,依据主报表中的数据,获取更详细的信息以图表的形式在同一个页面显示出来,用于参考

    步骤一:创建一个子报表(参考课程二十一:子报表的制作)

    步骤二:在sheet1表格中添加数据源,在数据源区点击,在弹出来的数据集获取语句获取中输入:select * from 销量,加入销量表加为数据源ds1。

    在工作栏中做出表格,我们把需要的数据集从左边的数据源区拖入工作区,给列上面标明列的名册,给单元格加边框,单元格居中,效果如下图。

    新建一个模板参数p1,默认值为’孙杰’,类型为‘字符串’(参考模课程:十五)

    步骤三:在需要传递数据的地方,右键选择“区域联动”,

     

    在区域联动设置中,先选择“主表单区域选择”中的下拉框选择 联动区域,点击可以添加一个区域联动,在左侧选中添加的区域单元格,在右侧设置模板参数

    选择子报表

     

    在sheet2表格中添加数据源,在数据源区点击,在弹出来的数据集获取语句获取中输入:select * from 销量 where 销售员=@{p1},加入销量表加为数据源ds2。

    我们可以点击工具栏里面的,可以进行预览。

     

    在子报表中插入图表,并设置属性

     

    我们可以点击工具栏里面的,可以进行预览。

     

    步骤四:保存

    点击文件菜单栏保存模板,模板命名为区域联动。

    展开全文
  • 课程十六:制作复杂区域联动报表步骤一:添加数据源在数据源区点击添加数据源,在数据集获取语句窗口中输入:select *,'' as a from 城市销量 加入数据源。再添加一个数据源:select * from 城市销量 where 省份 ...

    课程十六:制作复杂区域联动报表

    步骤一:添加数据源

    在数据源区点击添加数据源,在数据集获取语句窗口中输入:select *,'' as a from 城市销量 加入数据源。再添加一个数据源:select * from 城市销量 where 省份 like '%'||@{param1}||'%'

    步骤二:建立工作表

    根据地图报表制作方式制和子报表的制作方式,完成效果如下。

     

    步骤三:设置区域联动

    选中地图之后,右键选择“区域联动”,新建两个区域联动,效果如下

    步骤四:点击工具栏预览效果图。


    步骤五:保存报表

    在菜单栏点击文件—保存模板,模板命名地区销售多层钻取报表。

    展开全文
  • 想要写一个效果如下图所示,两个区域,之间的滚动条互不影响,各自独立作用。 点击左边导航,右边会跟着滚动 ` <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
  • 由于省市区区域地址经常变化,APP对应的区域地址也要经常变化。现有的策略导致用户在下单选择地址,经常卡顿,甚至某些用户出现无地址选择现象,分析现有情况,决定对区域地址采取如下优化手段。 1 在APP打包时...
  • } /** * 获取指定城市的区域 */ public function getArea() { $id = $_POST['id']; $data = $this->AreaModel->getArea($id); self::_return($data); } 模型 /** * 获取所有省 */ public function getProv() { $...
  • <div><p>因为采用了阿里的dva脚手架,所以状态统一在model内管理了,city变化时候,但地图无变化,应该监听什么事件或者有什么处理方式?由于本人不是专业前端,...
  • 因项目对区域的样式有要求,而select标签的option不能自定义,故通过div实现select标签的选择效果。 说明如下: 1.实现点击文字框和⌵区域框出现,点击其他地方区域框关闭,通过在该页面的最大级div(非body)上增加...
  • 选中地图之后,右键选择“区域联动”,新建三个区域联动,参数配置如下:   步骤四:点击工具栏 预览效果图。   步骤五:保存报表 在菜单栏点击文件—保存模板,模板命名地区销售多层钻取...
  • jQuery EasyUI Combobox 二级区域联动

    千次阅读 2014-01-26 23:09:50
    01 $(function(){ 02  var provinceId = $('#provinceId').combobox({ 03 ... url:'${pageContext.request.contextPath}/region/province/json.ht
  • $(function(){ var provinceId = $('#provinceId').combobox({ url:'${pageContext.request.contextPath}/region/province/json.htm', editable:false, valueFie...
  • 其中有个功能 是部门联动 功能 用了2个select标签 ,其中 select 1标签中 加载一级部门 在 select1标签选择一个一级部门 自动把所选择的一级部门下的二级部门自动加载到 select2 标签中 , 现在遇到个问题,我在...
  • Page({ /** * 页面的初始数据 */ data: { cityList: ['北京', '上海', '深圳', '广州'], cityIndex: 1, time: '17:01', date: '2018-6-28', customItem: "全部", region: ['广东省', '深圳市', '宝安...
  • 区域三级联动

    2021-01-07 09:29:18
    现在记录一个三表三级区域联动的实际代码 主要代码有 Treeselect树结构实体类 本身嵌套结构实体类 目前这里只会记录实现类的逻辑,其他代码模块 包括区域表数据都在 ...
  • 区域地图联动.zip

    2019-10-25 10:14:09
    利用百度API实现的区域地图联动,要实现的需求是选择省份和城市县区后,下方地图可以自动定位到该区域,方便用户使用、查找地址信息。实现思路是通过省市县三级联动提供具体的经纬度来对地图进行定位,地图绘制调用...
  • 假如你对区域选择联动及需要一份js版的全国地区信息词典,那么可以看看这篇文章,http://blog.csdn.net/cdnight/article/details/19346415, 另一篇文章有全国区域信息: ...
  • jQuery沈阳区域街道三级联动代码是一款手机端沈阳区域街道三级联动代码下载。
  • 三级联动区域选择

    2017-03-15 15:10:57
    实现了web的三级城市信息联动,以及获取最终选择的城市代号
  • 城市区域单表实现三级联动
  • jQuery沈阳区域街道三级联动代码是一款手机端沈阳区域街道三级联动代码下载。
  • 功能描述:行政区域国家、省、市、区四级联动实现步骤:1、创建行政区域实体,用来记录行政区域信息,如下图:2、打开行政区域实体查找视图,增加查找列"上级区域id",如下图:3、在上级区域属性的onchange事件中加入...
  • iOS菜单滚动联动内容区域功能实现,

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 889
精华内容 355
关键字:

区域联动