HAP_头行结构界面

最新推荐文章于 2021-05-31 12:02:04 发布
最新推荐文章于 2021-05-31 12:02:04 发布
阅读量947 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34271119/article/details/83796651
版权

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


13265172-8c3bdcb81f4e3adc.png
image.png 
步骤1：把行页面的grid赋值到头页面

步骤2:新建 行<div>
13265172-b769654dcff47e8a.png
image.png

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

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

步骤四:更改行的查询视图模型
13265172-29a3c12fed6f607b.png
image.png 
步骤五：点击头grid行获取关联字段，并将字段传给行
13265172-7af9c971a4cda25c.png
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>

备注：grid不可编辑: editable: false,
grid不自动加载autoBind: false,

灯下驼贼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HAP 是什么 （HarmonyOS鸿蒙开发基础知识）
iCloudEnd的博客
09-14 1万+
HAP 是什么 HarmonyOS应用发布形态为APP Pack（Application Package，简称APP），它是由一个或多个HAP（HarmonyOS Ability Package）包以及描述APP Pack属性的pack.info文件组成。 HAP是Ability的部署包，HarmonyOS应用代码围绕Ability组件展开，它是由一个或多个Ability组成。Ability分为两种类型：FA（Feature Ability）和PA（Particle Ability）。FA/PA是应用的基本
HAP_Advanced_PDF_Password_Recovery 5.05
08-07
HAP_Advanced_PDF_Password_Recovery 5.05 PDF破解软件
bootstrap table中显示头行结构
weixin_30307921的博客
08-01 281
最近做项目遇到一个需求，就是在表格中显示头行结构的数据。显示的效果如下： 项目的基本技术选型，vueJS作为前端框架，bootstrap作为主要界面布局。 当时这个需求拿到手，最初我是用两张表来解决的，思路就是，分别循环头表和行表，然后按照正确的顺序渲染到表格中。再根据头行的具体对应关系关联。可是写的时候发现代码量大，而且头行关系不易维护（对应的顺序有可能会在...
HAP头行结构部分整理
weixin_33877885的博客
08-09 246
附件中有参考文档和小作业源码 1.引用两个快码： <script src="${base.contextPath}/common/code?bankTypeData=HBI.DEMO.BANK_TYPE&bankNameData=HBI.DEMO.BANK_NAME" type="text/javascript"> </script&g...
Aurora头-行结构保存
Bitter_Coffee_00的博客
12-21 395
》》头数据存入，行数据不存入 解决：bindName的值是否与svc中的匹配 》》行insert查找不到头的ID 解决1：头BM中没有配置output=‘ture’等               &lt;bm:parameters &gt;               &lt;bm:parameter name="voucher_header_id" input="tr...
HAP
weixin_41798071的博客
05-25 246
加载 // 从物理路径的文件加载 var doc = new HtmlDocument(); doc.Load(filePath);//文件路径 从Stream当中加载 var doc = new HtmlDocument(); doc.LoadHtml(html); // 从网页的Url链接加载 var url = “http://www.cnblogs.com/xuliangxing/”; v...
HAP_SecureCRT.rar_HAP_SecureCRT
09-21
标题 "HAP_SecureCRT.rar_HAP_SecureCRT" 暗示了这是一个与网络通信和终端模拟器软件 SecureCRT 相关的压缩文件，可能包含了用于COM端口调试的相关配置或教程。SecureCRT是一款广泛使用的软件，允许用户通过安全的...
HAP_SQLyog_Enterprise_7.14
03-23
《HAP_SQLyog_Enterprise_7.14：高效管理MySQL数据库的得力助手》 SQLyog是一款强大的MySQL数据库管理和开发工具，由Webyog公司开发，它以其直观的用户界面、高效的性能和丰富的功能深受广大数据库管理员和开发者的...
linux远程工具 HAP_SecureCRT_5.1.3 和上传工具 FileZilla FTP Client
10-27
"HAP_SecureCRT_5.1.3"和"FileZilla FTP Client"就是这样的两款利器，分别用于SSH连接和文件传输。 **HAP_SecureCRT 5.1.3** SecureCRT是一款强大的终端仿真程序，它支持多种协议，包括SSH1、SSH2、Telnet、Serial...
HAP_upload.ftl
Code First
08-05 206
image.png
HAP_消息队列_邮箱改造
Code First
08-08 585
仅供参考 业务需求： 1. 将邮件任务改造为服务任务，在服务任务中实现邮件发送； 2. 邮件模板的发送类型定义为直接 3. 测试效果 4. 将邮件发送改为队列列模式，由代理理类负责向队列列中发送消息 5. 编写队列列消费类处理理队列列消息，实现邮件的异步发送 image.png 步骤1. components包下新建一个服务任务类```Sen...
HAP前端页面学习总结
程序猿_hw的博客
07-28 4178
用到的数据表脚本如下： wht_hec_20500_org_access_b数据表： CREATE TABLE `wht_hec_20500_org_access_b` ( `ACCESS_ID` int(11) NOT NULL AUTO_INCREMENT COMMENT '表ID，主键，供其他表做外键', `ACCESS_NAME` varchar(50) NOT NULL C...
怎么提交grid中的数据
Jannay的博客
11-16 264
一、提交Ext.grid.GridPanel 中所有数据 1、前台操作 function saveOperatorFunExt(){   var store=funExt_grid_center.getStore();   // 将数据放到另一个数组中   var selFuns = [];   store.each(function(rec){    selFuns.push(Ext.ut...
Kindo UI grid表格自定义列是否可编辑
sinat_37179161的博客
06-29 7707
kindo UI在绘制了一个kendoGrid时，可能需要去控制哪些列允许编辑，哪些列不允许编辑。网上搜搂了很久，寻得良方，总结方法如下： 先回顾创建kendoGrid三部曲 1. 定义存放GRID的容器。 <!-- 创建容器 --> <div id="grid"></div> <script> // 创建模型 var viewModel = Hap.createGridViewModel("#grid"); </scri
HAP_头⾏/主从结构的实现
Code First
08-02 293
实现说明： student.html--学生页面 student_score.html--成绩页面 用两个页面做成下图结构：(在学生页面点击编辑成绩，然后弹出成绩添加页面) image.png 数据表准备： wht_ora_20796_student.sql CREATE TABLE `wht_ora_20796_student...
hap开发中的几个问题（遇到问题不慌不乱，想想问题的原因自然会解决）
qq_39259140的博客
03-12 1976
1.查询时间匹配问题 原因：前端的Date类型格式与数据库（MySql）中的Date类型格式问题，所以在Controller中加如下代码解决。 //-。-这里这个方法解决时间查询时格式不统一的问题 @InitBinder protected void init(HttpServletRequest request, ServletRequestDataBinder bin...
html怎么自动弹出模态框,点击按钮弹出模态框
weixin_27228507的博客
05-31 1119
1)设置div用于显示模态框2)设置模态框的样式$("#win1").kendoWindow({width: "600px",height:"400px",title: ‘‘,modal:true,resizable: true,visible:false,iframe:true});3)模态框指定到某个特定的html页面var userWin = $("#win1").data("kendoWi...
hap_values = explainer.shap_values(X_test[:].values) # <-- HERE ! AttributeError: 'numpy.ndarray' object has no attribute 'values'
最新发布
05-16
hap_values = explainer.shap_values(X_test) ``` 如果您仍然遇到问题，请确保 `X_test` 是一个 Pandas DataFrame 对象，而不是一个 NumPy 数组。如果是 NumPy 数组，您可以将其转换为 Pandas DataFrame 对象，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值