YangHuOperation/web/maintain/material_replace_lib/html/edit.html

<nav class="navbar navbar-toggleable-lg justify-content-between navbar-light p-0 second_header">
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active px-3" href="javascript: void(0);">材料替换</a>
        </li>
    </ul>
</nav>

<div class="main">
    <div class="content" >
        <div class="container-fluid" >
            <div class="row">
                <div class="tools-bar p-1 d-flex justify-content-between col-lg-12" style="background: #f7f7f7;">
                    <div class="input-group input-group-sm col-lg-4">
                        <input class="form-control" placeholder="搜索定位" type="text" id = 'keyword'>
                        <span class="input-group-btn">
                              <button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
                            </span>
                        <a class="btn btn-sm btn-link"  style="color: #0275d8;cursor:pointer" data-toggle="modal" data-target="#guize"">关于规则</a>
                    </div>
                </div>
                <div class="main-content col-lg-4 p-0">
                    <div class="main-data" id="billsSpread"></div>
                </div>
                    <div class="col-lg-4 main-side p-0" id="materialSpread"></div>
            </div>
        </div>
        <input type="hidden" id="libID" value="<%= libID %>">
        <input type="hidden" id="gljLibID" value="<%= gljLibID %>">
        <input type="hidden" id="billsLibId" value="<%= billsLibId %>">
    </div>
</div>

<!--弹出关于规则-->
<div class="modal fade" id="guize" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">关于规则</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <thead><tr><th width="90">规则名称</th><th>规则解释</th></tr></thead>
                    <tr><td>规则1</td><td>材料及规格：MU5烧结页岩空心砖</td></tr>
                    <tr><td>规则2</td><td>1.混凝土种类：商品混凝土<br>2.混凝土强度等级：C30</td></tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //自适应高度
    $(".main-data").height($(window).height()-$(".header").height()-$(".tools-bar").height()-$(".navbar").height()-16);
    let billsList = '<%- billsList %>';
</script>
<script type="text/javascript" src="/lib/jquery-contextmenu/jquery.contextMenu.js"></script>
<script type="text/javascript" src="/public/web/sheet/sheet_common.js"></script>
<script type="text/javascript" src="/public/web/sheet/sheet_data_helper.js"></script>
<script src="/public/web/lock_util.js"></script>
<script type="text/javascript" src="/web/maintain/material_replace_lib/js/material_replace_edit.js"></script>