
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title" id="myModalLabel">分配/回收资产</h4>
</div>

<div class="modal-body" style="padding-bottom: 0px;">
    <table aria-describedby="editable_info" role="grid" class="table table-striped table-bordered table-hover  dataTable" id="editable">
        <thead>
            <tr>
                <th class="text-center" style="background-color:white">
                    <input type="checkbox" id="check_all" onclick="checkAll()">
                </th>
                <th id="th_no">id</th>
                <th>资产名称</th>
                <th>IP</th>
                <th>类型</th>
            </tr>
        </thead>
        <tbody>
        {% for asset in assets %}
            {% if asset.id in all_assets %}
            <tr name="oAssets" class="odd selected text-center">
                <td class="text-center" ><input type="checkbox" name="checked" value="{{ asset.id }}" checked="checked"></td>
            {% else %}
            <tr name="oAssets">
                <td class="text-center"><input type="checkbox" name="checked" value="{{ asset.id }}" ></td>
            {% endif %}
                <td class="text-center">{{ asset.id }}</td>
                <td class="text-center">{{ asset.hostname }}</td>
                <td class="text-center">{{ asset.ip }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" id="close-btn">取消</button>
    <button type="button" class="btn btn-primary" id="save-btn">保存</button>
</div>

<script type="text/javascript">
$(document).ready(function(){
    var table = $('#editable').DataTable({
        "aLengthMenu": [[10, 25, 50, -1], ["10", "25", "50", "all"]],
        "iDisplayLength":25,
        "aaSorting": [[2, "asc"]],
        "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }],
        "bAutoWidth": false,
        columns: [
            {data: "checkbox"},
            {data: "id"},
            {data: "hostname"},
            {data: "ip"},
            {data: "type"}
        ]
    });
    //将ID列隐藏
    table.column('1').visible(false);

    $('#editable tbody').on( 'click', 'tr', function () {
        //alert($(this).hasClass('selected'));
        if($(this).hasClass('selected')){
            $(this).removeClass('selected');
            this.children[0].children[0].checked=0;
        }else{
            $(this).addClass('selected');
            this.children[0].children[0].checked=1;
        }
    });

    $('#close-btn').on('click',function(){
        $('#modal').modal('hide');
    });
    var size_name = document.getElementById('asset_on_count').innerText;
    $('#save-btn').on('click',function(){
        //alert( table.rows('.selected').data().length +' row(s) selected' );
        var d = table.rows('.selected').data();
        var size = d.length;
        var re = /\d+/;
        document.getElementById('add_asset').value = size;
        var str= size_name;
        var re=/\d+/g;
        document.getElementById('asset_on_count').innerText = str.replace(re, size);
        var column2 = table.rows('.selected').data();
        $("#asset_sed").find("input[name='assets']").remove();
        $("#asset_sed").find("button[name='asset_hostname']").remove();
        for(var i=0;i<column2.length;i++){
            column2[i].checkbox='<input name="checked" value="1" checked="" type="checkbox">';
            var value = column2[i].id;
            var ip = column2[i].ip;
            var hostname = column2[i].hostname;
            $("#asset_sed").append("<input  type='hidden' name='assets' value='"+value+"'>");
            $("#asset_on_p").append("<button name='asset_hostname' title='"+ip+"' type='button' class='btn btn-default btn-xs ss'>"+hostname+"</button> ");
        }
        $('#modal').modal('hide');
    });

}); //$(document).ready

var bCheck = 1;
function checkAll(){
    if(bCheck){
        $("tr[name='oAssets']").each(function(){
            oCheckbox = this.children[0].children[0];
            $(this).toggleClass('selected',true);
            oCheckbox.checked=1;
        });
        document.getElementById('check_all').checked=1;
        bCheck = 0;
    }else{
        $("tr[name='oAssets']").each(function(){
            oCheckbox = this.children[0].children[0];
            $(this).toggleClass('selected',false);
            oCheckbox.checked=0;
        });
        document.getElementById('check_all').checked=0;
        bCheck = 1;
    }
}

</script>
