HAP_头行结构界面

业务需求：用户选择头信息，下面出现行信息
效果图：

image.png

步骤1：把行页面的grid赋值到头页面

步骤2:新建 行<div>

image.png

步骤3：新建行视图模型 viewModel

<script type="text/javascript">
    var viewModel = Hap.createGridViewModel("#grid");//头
    var otviewModel = Hap.createGridViewModel("#outstorageTrxGrid");//行
</script>

步骤四:更改行的查询视图模型

image.png

步骤五：点击头grid行获取关联字段，并将字段传给行

image.png

这个头行结构没也涉及到界面维护（增删查改），所以后端Java代码没有改动，若用到界面维护可以参考https://www.jianshu.com/p/83a28df96348

页面代码：

<#include "../include/header.html">
<script type="text/javascript">
    var viewModel = Hap.createGridViewModel("#grid");//头
    var otviewModel = Hap.createGridViewModel("#outstorageTrxGrid");//行
</script>
<body>
<div id="page-content">
    
        <input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;"
               placeholder='<@spring.message "OutstorageTrxSummary.transactionSourceName"/>'
               data-bind="value:model.transactionSourceName" class="k-textbox">
        <input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;"
               placeholder='<@spring.message "OutstorageTrxSummary.transactionTypeName"/>'
               data-bind="value:model.transactionTypeName" class="k-textbox">
        <span class="btn btn-primary" style="float:left;width:70px" data-bind="click:query" type="submit"><@spring.message "hap.query"/></span>
        <div style="clear:both"></div>
    </div>
    <script>kendo.bind($('#query-form'), viewModel);</script>
    <div style="clear:both">
        <div id="grid"></div>
    </div>
    <!--EDB出库-->
    <div style="clear:both">
        <div id="outstorageTrxGrid"></div>
    </div>
</div>

<script type="text/javascript">

    Hap.initEnterQuery('#query-form', viewModel.query);
    var BaseUrl = _basePath;
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: BaseUrl + "/xxinv/outstorage/trx/summary/query",
                type: "POST",
                dataType: "json"
            },
            update: {
                url: BaseUrl + "/xxinv/outstorage/trx/summary/submit",
                type: "POST",
                contentType: "application/json"
            },
            destroy: {
                url: BaseUrl + "/xxinv/outstorage/trx/summary/remove",
                type: "POST",
                contentType: "application/json"
            },
            create: {
                url: BaseUrl + "/xxinv/outstorage/trx/summary/submit",
                type: "POST",
                contentType: "application/json"
            },
            parameterMap: function (options, type) {
                if (type !== "read" && options.models) {
                    var datas = Hap.prepareSubmitParameter(options, type)
                    return kendo.stringify(datas);
                } else if (type === "read") {
                    return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)
                }
            }
        },
        batch: true,
        serverPaging: true,
        pageSize: 10,
        schema: {
            data: 'rows',
            total: 'total',
            model: {
                id: "trxSummaryId",
                fields: {}
            }
        }
    });

    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        resizable: true,
        scrollable: true,
        navigatable: false,
        selectable: 'multiple, rowbox',
        dataBound: function () {
            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('${RequestParameters.functionCode!}')
            }
        },
        pageable: {
            pageSizes: [5, 10, 20, 50],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "trxSummaryId",
                title: '<@spring.message "outstoragetrxsummary.trxsummaryid"/>',
                width: 120
            },
            {
                field: "transactionId",
                title: '<@spring.message "outstoragetrxsummary.transactionid"/>',
                width: 120
            },
            {
                field: "inventoryItemId",
                title: '<@spring.message "outstoragetrxsummary.inventoryitemid"/>',
                width: 120
            },
            {
                field: "itemNumber",
                title: '<@spring.message "outstoragetrxsummary.itemnumber"/>',
                width: 120
            },
            {
                field: "lockCode",
                title: '<@spring.message "outstoragetrxsummary.lockcode"/>',
                width: 120
            },
            {
                field: "organizationId",
                title: '<@spring.message "outstoragetrxsummary.organizationid"/>',
                width: 120
            },
            {
                field: "organizationName",
                title: '<@spring.message "outstoragetrxsummary.organizationname"/>',
                width: 120
            },
        
        ],
        editable: false
    });

    $(grid).on("click", "td", function (e) {
        var rowIndex = $(this).parent().index();
        var contactData = $("#grid").data("kendoGrid").dataSource.data();
        otviewModel.model.set("transactionId",contactData[rowIndex].transactionId);
        $('#outstorageTrxGrid').data('kendoGrid').dataSource.page(1);
    })

</script>

<!--EDB出库-->

<script type="text/javascript" id="outstorage">

    //Hap.initEnterQuery('#query-form', viewModel.query);
    var BaseUrl = _basePath;
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: BaseUrl + "/xxinv/outstorage/trx/query",
                type: "POST",
                dataType: "json"
            },
            update: {
                url: BaseUrl + "/xxinv/outstorage/trx/submit",
                type: "POST",
                contentType: "application/json"
            },
            destroy: {
                url: BaseUrl + "/xxinv/outstorage/trx/remove",
                type: "POST",
                contentType: "application/json"
            },
            create: {
                url: BaseUrl + "/xxinv/outstorage/trx/submit",
                type: "POST",
                contentType: "application/json"
            },
            parameterMap: function (options, type) {
                if (type !== "read" && options.models) {
                    var datas = Hap.prepareSubmitParameter(options, type)
                    return kendo.stringify(datas);
                } else if (type === "read") {
                    return Hap.prepareQueryParameter(otviewModel.model.toJSON(), options)//注意这里的ovewMode用的是行的
                }
            }
        },
        batch: true,
        serverPaging: true,
        pageSize: 10,
        schema: {
            data: 'rows',
            total: 'total',
            model: {
                id: "transactionId",
                fields: {}
            }
        }
    });

    var outstorageTrxGrid = $("#outstorageTrxGrid").kendoGrid({
        dataSource: dataSource,
        resizable: true,
        scrollable: true,
        navigatable: false,
        selectable: 'multiple, rowbox',
        dataBound: function () {
            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('${RequestParameters.functionCode!}')
            }
        },
        pageable: {
            pageSizes: [5, 10, 20, 50],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "transactionId",
                title: '<@spring.message "outstoragetrx.transactionid"/>',
                width: 120
            },
            {
                field: "inventoryItemId",
                title: '<@spring.message "outstoragetrx.inventoryitemid"/>',
                width: 120
            },
            {
                field: "itemNumber",
                title: '<@spring.message "outstoragetrx.itemnumber"/>',
                width: 120
            },
            {
                field: "lockCode",
                title: '<@spring.message "outstoragetrx.lockcode"/>',
                width: 120
            },
            {
                field: "organizationId",
                title: '<@spring.message "outstoragetrx.organizationid"/>',
                width: 120
            },
            {
                field: "organizationName",
                title: '<@spring.message "outstoragetrx.organizationname"/>',
                width: 120
            },
           
         
        ],
        editable: false,
        autoBind: false,
    });


</script>

</body>

</html>