Easy Frame

list.html

  • 页面中使用的封装标签会在 封装标签 章节详细介绍
  • 在 .query-modular 中的元素会在查询时作为查询条件自动拼接到表单数据中
  • 请将页面中的JavaScript放到/static/modular/xxx/list.js中
  • kt_datatable如有id会自动保存用户上次设置的排序/页大小信息
  • 如需要设置权限，请在封装的按钮上设置permission="权限标识"属性
@layout("/common/container.html", {"title" : "代码生成示例"}){
<div class="card">
    <#card:head title="代码生成示例" icon="la la-bars"/>
    <div class="card-body">
        <form class="e-form">
            <div class="query-modular">
                <div class="e-grid e-grid--ver e-grid--general">
                    <div class="e-grid-item e-grid-item--fluid">
                        <div class="row">
                            <!--str:查询条件区域-->
                            <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                                <#form:input id="name" name="姓名" />
                            </div>
                            <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                                <#form:select class="select-picker" dataDictType="commonStatus" id="status" name="状态" />
                            </div>
                            <!--end:查询条件区域-->
                        </div>
                    </div>
                    <div class="e-grid-item query-btn-group">
                        <#btn:search />
                        <#btn:reset />
                    </div>
                </div>
            </div>
            <div class="btn-row">
                <#btn:add permission="sample:general:add"/>
                <#btn:delete permission="sample:general:delete"/>
            </div>
            <div class="kt_datatable" id="sample_general-list"></div>
        </form>
    </div>
</div>
<!--begin::页面脚本 -->
<script src="${ctxPath}/static/modular/sample/general/list.js?v=${version()}" type="text/javascript"></script>
<!--end::页面脚本 -->
@}

kt_datatable 的 id 禁止重复，禁止重复，禁止重复，后果自负

为了区分是查询条件还是表格内元素所以在查询条件区域添加div.query-modular

← list.js →