123

最新推荐文章于 2018-11-12 19:39:09 发布

Tufffggh

最新推荐文章于 2018-11-12 19:39:09 发布

阅读量419

点赞数

本文提供了一个客户小款查询条件布局页面的示例，包括搜索区域和Datagrid展示数据，通过简单的步骤即可完成页面布局的创建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 
    Search + Datagrid 布局页面Demo 
    使用步骤：
    1、Ctrl + C & Ctrl + V
    2、替换ID（Ctrl + H）,例如本页面为 buyoutBillAudit 替换成你的 PageName
    3、修改两个title（searchg + table）
    4、修改搜索区域的Form ID
    5、复制修改你需要的搜索区域input-group或input-group-2 (会自适应的)，特殊特殊处理
    6、修改你的Datagrid
    7、在Index中添加SetPage（'PageName'）
    8、这样就完成完成layout了
    N、然后、摩擦摩擦~ & Good luck
-->

<!-- layout layout-own begin -->
<div class="layout-own">

    <!-- layout panel-search begin -->
    <div id="buyoutBillAuditSearch" class="panel-all panel-search">
        
        <!-- panel-search > title begin -->
        <div class="title">
            <span>客户小款查询条件</span> <a href="javascript:;">
                <div id="buyoutBillAuditSlideUp" class="slideUp">
                </div>
                <div id="buyoutBillAuditSlideDown" class="slideDown">
                </div>
            </a>
        </div>
        <!-- panel-search > title end -->

        <!-- panel-search > body begin -->
        <div id="buyoutBillAuditBody" class="panel-body slide-div">
            <form id="SmallPaySearchForm">
            <div class="search-panel">
                <div class="row-inline">
                    <div class="padding-10">

                        <!-- panel-search > input-group begin -->
                        <div class="input-group">
                            <div class="label-80">
                                票据票号:
                            </div>
                            <div class="input-120">
                                <input id="MSbillNum" type="text" />
                            </div>
                        </div>                      
                        <div class="input-group-2">
                            <div class="label-80">
                                贴现日从:
                            </div>
                            <div class="input-120">
                                <input id=""  style="width: 120px"  />
                            </div>
                            <div class="label-80">
                                到:
                            </div>
                            <div class="input-120">
                                <input id=""  style="width: 120px"  />
                            </div>
                        </div>    
                        <div class="input-group">
                            <div class="label-80">
                                票据票号:
                            </div>
                            <div class="input-20">
                                <input id="" type="checkbox" />
                            </div>
                        </div>
                        <!-- panel-search > input-group end -->

                    </div>
                </div>
            </div>

            <!-- panel-search > btn-panel begin -->
            <div class="btn-panel">
                <div class="btn-a">
                    <a href="javascript:;" class="easyui-linkbutton" iconcls="icon-search" onclick="searchBillSearch()">
                        查询</a>
                </div>
                <div class="btn-a">
                    <a href="javascript:;" class="easyui-linkbutton" iconcls="icon-reload" onclick="resetBillSearch()">
                        重置</a>
                </div>
            </div>
            <!-- panel-search > btn-panel begin -->

            </form>
        </div>
        <!-- panel-search > body begin -->

    </div>
    <!-- layout panel-search begin -->

    <!-- layout panel-table begin -->
    <div id="buyoutBillAuditTable" class="panel-all panel-table">
        
        <!-- panel-table > title begin -->
        <div class="title">
            <span>客户小款设置</span>
        </div>
        <!-- panel-table > title end -->

        <!-- panel-table > datagrid begin -->
        <table id="buyoutBillAuditGrid">
        </table>
        <!-- panel-table > datagrid begin -->


        <!-- JS div begin -->
        <div class="indentScript"></div>
        <!-- JS div end -->

    </div>
    <!-- layout panel-table begin -->

</div>
<!-- layout layout-own end -->

<!-- layout dialog begin -->
<!-- layout dialog end -->

<script>
    $('#buyoutBillAuditGrid').datagrid({
        showFooter: true,
        pagination: true,
        pageSize: 100,
        pageList: [100, 150, 200, 250, 300],
        fit: true,
        rownumbers: true,
        showFooter: true,
        nowrap: true,
        autoRowHeight: false,
        url: '',
        toolbar: [{
            text: '利率及路径设置',
            iconCls: 'icon-add',
            handler: function () {
                addSetting()
            }
        }],
        columns: [[
                { field: 'ck', checkbox: true },
                { field: 'Department', title: '网点', width: 100 },
                { field: 'BillStatus', title: '状态', width: 100 },
                { field: 'DiscountDate', title: '贴现日期', width: 100 },
                { field: 'BillMoney', title: '票面总金额', width: 100 },
                { field: 'BillNum', title: '票号', width: 100 },
                { field: 'AcceptanceBank', title: '承兑行名称', width: 100 },
                { field: '', title: '到期日', width: 100 },
                { field: '', title: '划款天数', width: 100 },
                { field: '', title: '划款利率', width: 100 },
            ]]


    });
</script>