zeus/front/templates/pc/device/alert/mul.html

<input type="hidden" name="id" id="id" value="{% if 'info' in data and data['info'] and 'id' in data['info'] and data['info']['id'] > 0 %}{{data['info']['id']}}{% end %}" />
<div class="form">
    <label><span>控制名称:</span><input type="text" name="update_name" id="update_name" value="{% if 'info' in data and data['info'] and 'name' in data['info'] and data['info']['name'] %}{{data['info']['name']}}{% end %}" placeholder="批量控制名称"></label>
    
    <label><span>设备类型:</span>
    <select id="update_type" name="update_type" onchange="selectDevice($(this))">
    	{% for v in data['type'] %}
        <option value="{{v['id']}}" {% if 'info' in data and data['info'] and 'device_type' in data['info'] and data['info']['device_type'] == v['id'] %}selected{% end %}>{{v['name']}}</option>
        {% end %}
    </select>
    </label>


    {% if Demeter.isset('span') == 0 %}<label><span>选择设备:</span></label>{% end %}
	<div class="flex-cont">
	    <div class="scroller">
	        <ul>
	            {% for v in data['gateway'] %}
	            <li tab-id="{{v['id']}}" id="gateway_{{v['id']}}"><a href="javascript:;">{{v['name']}}</a></li>
	            {% end %}
	        </ul>
	    </div>
	    <div class="scroller tab-cont">
	        {% for k,v in enumerate(data['gateway']) %}
	        <ul tab-cont-id="{{v['id']}}" {% if k == 0 %}style="display: block;"{% else %}style="display: none;"{% end %}>
	            {% if data['device'] and v['id'] in data['device'] %}
	            {% for d in data['device'][v['id']] %}

	            {%set type = Demeter.service('common').one('setting_device_type', id=d['type_id'])%}
	            <li {% if type['unit'] == 'button' %}class="device_type device_type_2"{% else %}class="device_type device_type_1"{% end %}><label><input type="checkbox" name="update_devices" ids="update_devices" value="{{d['id']}}" data-parent="{{v['id']}}" {% if 'devices' in data['info'] and d['id'] in data['info']['devices'] %}checked{% end %}><span>{{d['name']}}</span></label></li>
	            {% end %}
	            {% end %}
	        </ul>
	        {% end %}
	    </div>
	</div>

	<script type="text/javascript">
	    $('.scroller').on('click','[tab-id]',function(){
	        var tabid = $(this).attr('tab-id');
	        $('.tab-cont [tab-cont-id="'+tabid+'"]').show().siblings().hide();
	    })
	    function selectDevice(e) {
	    	var v = e.val();
	    	var id = '.device_type_' + v;
	    	$(".device_type").hide();
	    	$(id).show();
	    }

	    $(function()
	    {
	    	$("#update_type").change();
	    });
	</script>

</div>