<div class="hls-pagging-grid"   <#if class??> class="${class!}"</#if>  <#if style??> style="${style!}"</#if>>
        <#if HIDTITLE ??><#else>
    <div id="${id}-title" class="grid-title global-font-size13" <#if titleStyle??>style="${titleStyle}" </#if>>
        <#if titleImg??>
        <img src="${titleImg}"/>
        </#if>
        <span style="padding-left:8px;">${title!}</span>
    <#if BTNIMPORT??>
        <img style="cursor:pointer;float:right;margin-right:10px;margin-top:8px;"
             id="${id!}_import"
             src="${base.contextPath}/resources/images/CONT/import.png"/>
    </#if>
    <#if BTNEXCEL??>
        <img id="${id!}_excel_export"
             style="cursor:pointer;float:right;margin-right:10px;margin-top:8px;"
             src="${base.contextPath}/resources/images/VAT-INF/vat-inf-7.png"/>
    </#if>
    <#if BTNINFOQUERY??>
        <img style="cursor:pointer;float:right;margin-right:10px;margin-top:8px;"
             id="${id!}_comprehensive_query"
             src="${base.contextPath}/resources/images/CONT/search_flag.png"/>
    </#if>
    <#if BTNADD??>
        <img style="cursor:pointer;float:right;margin-right:10px;margin-top:8px;"
             id="${id!}_add"
             src="${base.contextPath}/resources/images/CSH/add.png"/>
    </#if>
    <#if BTNSEARCH??>
        <div class="global-font-size12" style="float:right;height:40px;line-height:35px;margin-right:10px;">
            <img style="cursor:pointer; float:left;margin-top:8px;margin-left: 5px"
                 id="${id!}_search"
                 src="${base.contextPath}/resources/images/CONT/search.png"/>
            <input style="margin-right: 0px;margin-top: 7px" type="text" id="${id!}_search_input"
                   placeholder="${setPlaceholder!}"
                   class="search-style"/>
        </div>
    </#if>
    </div>
        </#if>
    <div id="${id}" class="grid-body">
    </div>
<#if HIDPAGINGBAR ??><#else>
    <div class="grid-foot" id="${id!}_grid_foot">
        <div class="page-btn" style="width: 100px">
            <img id="${id!}_foot_btn_prev" class="page-img-prev"
                 src="${base.contextPath}/resources/images/CSH/last.png"/>
            <span id="${id!}_foot_page_count" class="page-count" ></span>
            <img id="${id!}_foot_btn_next" class="page-img-next"
                 src="${base.contextPath}/resources/images/CSH/next.png"/>
        </div>
        <span class="page-message" id="${id!}_foot_page_message"></span>
    </div>
</#if>
</div>
<div style="clear:both;"></div>
<script>
    ${hlsDataSource!}.fetch(function (datas) {
        ${id} = new  HlsRollTable();
        var options =  ${config!}||{};
        options.hlsDataSource = datas;
        ${id}.dataSource = this;
        <#if HIDFEILDSNAME ??>
            options.hidFeildsName = true;
        </#if>
        options.dataSource = this;
        options.gridSelector = "#${id!}";
        options.pageControlSelector = "#${id!}_grid_foot";
        options.nextImgEnablePath = "${base.contextPath!}/resources/images/CSH/next.png";
        options.prevImgEnablePath = "${base.contextPath}/resources/images/CSH/lastCan.png";
        options.nextImgUnenablePath = "${base.contextPath!}/resources/images/CSH/nextNot.png";
        options.prevImgUnenablePath = "${base.contextPath}/resources/images/CSH/last.png";
        ${id}._init(options);
    });

    <#if BTNEXCEL??>
    $("#${id!}_excel_export").click(function(){
        var token  = $('meta[name=_csrf]').attr('content');
        var param = {invoiceIdParam:getCheckDataId()};
        var url = '${base.contextPath}/acr/inf/index/excel/export';
        var token  = $('meta[name=_csrf]').attr('content');
        var idStr = "";
        var arr = getCheckDataId();
        for(var i = 0; i < arr.length; i++){
            if(i == arr.length-1){
                idStr = idStr + arr[i];
            }else{
                idStr = arr[i] + ',';
            }
        }
        var $inputImg = $('<input>').attr({name: "paramStr", value: idStr});
        var $inputToken = $('<input>').attr({name: "_csrf", value: token, type: "hidden"});
        var $inputSubmitBtn=$('<input>').attr({type:"submit",value:"submit"});
        var $form = $("<form>");
        $form.attr({
            target: '_self',
            method: 'post',
            action: url
        }).append($inputImg);
        $form.append($inputToken);
        $form.append($inputSubmitBtn);
        $form.id = 'smbForm';
        var parentdiv = $('<div></div>');        //创建一个父div
        parentdiv.appendTo('body');
        parentdiv.hide();
        parentdiv.empty().append($form);//添加到隐藏div中
        $($form).submit();

    });

    function getCheckDataId(){
        var flag = document.getElementById("${id!}_check_all").checked;
        var length = ${id}.span.length;
        var data =[] , all = [];
        for(var i = 0; i < length; i++) {
            var element = ${id}.span[i][0].getElementsByClassName("selfCheckBox")[0];
            if(element.checked){
                data.push(Number(element.title));
            }
            all.push(Number(element.title));
        }
        if(flag){
            return all;
        }
        else{
            return data;
        }
    }
    </#if>


    <#if BTNIMPORT??>
         $("#${id!}_import").click(function () {
             ${BTFIMPORT}();
         });
    </#if>


    <#if BTNADD??>
        $("#${id!}_add").click(function () {
            ${BTFADD}();
        });
    </#if>

    <#if BTNINFOQUERY??>
        $("#${id!}_comprehensive_query").click(function () {
            ${BTFINFOQUERY}();
        });
    </#if>

    <#if BTNSEARCH??>
        $("#${id!}_search").on("click", function (e) {
            debugger
            var $input = $("#${id!}_search_input");
            if ($input.val().trim()) {
                var queryCondition = {};
                queryCondition.queryTimeSolt=7;
                queryCondition.${queryItem!} = $input.val().trim();
            ${hlsDataSource}.read(queryCondition);
            } else {
                $(this).next().animate({
                    width: 'toggle'
                }, 800);
                if ($(this).next().css("display") != "none") {
                ${hlsDataSource}.read({queryTimeSolt: 7});
                }

            }
            e.preventDefault();
        });
    </#if>

    <#if hlsCheckFlag??>
    $('<input type="checkbox" id="${id!}_check_all" class="selfCheckBox"/><label for="${id!}_check_all"></label>').appendTo('#${id!} table tr:first-child td:first-child span');
    $("#${id!}_check_all").click(function(){
        var length = ${id}.span.length;
        for(var i = 0; i < length; i++) {
            if(this.checked == true) {
            ${id}.span[i][0].getElementsByClassName("selfCheckBox")[0].checked = true;
            }
            else{
            ${id}.span[i][0].getElementsByClassName("selfCheckBox")[0].checked = false;
            }
        }
    });
    </#if>

</script>