• 告别aspx,高性能快捷开发 — JQuery Smart UI 快捷开发实例应用(一)入门【后篇】


      上篇把服务端Bll层的内容完成了,下面就开始UI层的开发,打造简洁而“清爽”的功能页面.

    • 第四步,配置Fncode

      与BLL后台方法对应,在UI层进行FnCode的配置,位置在:Config/FnCode.xml中。

    <Module name="UIDemo">
    <BR name="BRNews">
    <Fn no="fn_ns01"></Fn><!--查询-->
    <Fn no="fn_ns02"></Fn><!--保存-->
    <Fn no="fn_ng03"></Fn><!--获取单条数据-->
    <Fn no="fn_nd04"></Fn><!--删除-->
    </BR>
    </Module>

    Module:模块名节点,对应每个FnAdpter

    BR:业务类节点

    Fn:功能编号节点。

    另外还有roles角色权限配置的在后续文章中介绍。

    • 第五步,设置实体

      前台设置实体是Smart UI中实现各种动态生成的关键,位置在Javascript/const/modals.js:

         

    m_news = {
    ID: { field: 'N_ID'}
    , Title: { field: "N_Title", name: "Title", '150px', valid: true, validops: { required: true, range: [3, 50]} }
    , Content: { field: "N_Centent", name: "Content", '380px', ctr: 'textarea', valid: true,
    validops: { required: true, range: [20, 1000]} }
    , Date: { field: "N_Date", name: "Create Date",sort:true, '80px', type: 'date' }
    };

    与数据库的字段对应【但也不用完全一致,可以根据具体情况】。设置属性中包括:数据库字段、列表列设置、对应控件设置、数据类型设置、验证设置等等,详见Smart UI设置实体API

    • 第六步,创建内容页面

      主要有三个htm页面,【注:页面内容为空,不用任何文本和标签】创建到Pages/Learning/目录下:

      BaseFull.htm:列表页面,为主页面

      BaseFullEdit.htm:编辑页面,弹出页面

      BaseFullView.htm:查看页面,弹出页面

      

      然后再内容页面配置到Javascript/const/menus.js中

      

    代码
    //母模板页配置
    $master = ['Default.htm', ……, 'Demo.htm'];‘

    //页面路径配置
    $pagepath = ['Pages/', 'Pages/Plugins/', 'Pages/Learning/', ……];

    //内容页面配置【uicode】
    $page = {
    ………………
    , u_demo_basefull: { name:
    '完整功能', url: 'BaseFull.htm', master: 4, path: 2 }
    , u_demo_basefulledit: { url:
    'BaseFullEdit.htm', path: 2 }
    , u_demo_basefullview: { url:
    'BaseFullView.htm', path: 2 }
    }
    //菜单配置
     $menus = {
          …………,
        , learning: [
                    { name: '基础部分', rows: [

                        {name: $page.u_demo_baseedit.name, ui: 'u_demo_baseedit' }
                        , { name: $page.u_demo_baselist.name, ui: 'u_demo_baselist' }
                        , { name: $page.u_demo_basefull.name, ui: 'u_demo_basefull' }
                    ]
                    }
    }

    $master: 母模板页配置,每个主页面需要对应一个master

    $pagepath: 内容页面路径配置

    $page: 内容页面配置,子对象名既为uicode【如:BaseFull.htm的uicode为u_demo_basefull】,master:母模板页,对应$master的序号,path:对应$pagepath的序号。

    $menus:菜单配置,name:显示名称,rows:子菜单,ui:uicode与$page的子对象名对应

       至此,所有配置端的内容完结,呵呵,感觉是有些多,不过也还好,不算很麻烦,当然配置的话很多地方可以简化,但考虑到整个项目维护性上和性能上,这样做还是很有必要的。后面版本中会加入配置生产工具,可以减少很多配置的工作量。

    • 第七步,内容页面coding

      内容页面准确的说只是一个片段html,不具备完整的html结构【<html>标签这些都不用定义,当然完整的结构也没问题,实现效果一样,但却没有任何意义,而且会增加页面大小。】。

      1.编辑页面BaseFullEdit.htm 

    代码
    <div class="eidtPanel" id="editPanel">
    <h4>
    News Edit
    </h4>
    <input id="hidNID" type="hidden" field="N_ID" />
    <ul id='pe_News'>
    </ul>
    <div class="operate">
    <a class="btn" id="btnSave"><span>Save</span></a>
    <a class="btn" id="btnCancel"><span>Cancel</span></a>
    </div>
    </div>

    <script type="text/javascript">
    $(
    function () {
    initEdit();
    });

    </script>

     

      2.查看页面BaseFullView.htm

      其实查询页面与编辑页面的大部分结构一样,可以用相同一页面,但为了演示方便在这里分开使用。 

    代码
    <div class="viewPanel">
    <h4>
    News View
    </h4>
    <ul id='pv_News'>
    </ul>
    <div class="operate">
    <a class="btn" id="btnCancel"><span>Cancel</span></a>
    </div>
    </div>

    <script type="text/javascript">
    $(
    function () {
    initView();
    });

    </script>

     

      3. 查询列表页面BaseFull.htm

    <div class='searchPanel'>
    <h4>
    News List
    </h4>
    <div class="operate">
    <a class="btn" id="btnSearch"><span>Search</span></a>
    <a class="btn" id="btnAdd" onclick="openEdit()"><span>Add</span></a>
    <a class="btn" id="btnDel"><span>Delete</span></a>
    </div>
    <div class='panel_body'>
    <ul id="ps_News">
    </ul>
    </div>
    </div>
    <div id="pl_News">
    </div>

    查询页面Html做为主页面,编辑页面和查看页面的初始化代码都放在查询页面中【当然也可以分开,每个页面放自己相关代码,但整体上,所有内容都是在一个htm中,彼此的对象都可以互相访问,将代码集中起来更便于管理】

    查询页面js ,这些js可以放到页面上,也可以单独用js文件,然后再内容页面上加引用【即jscode的方式,后面会介绍此方式的优势】。

    <script type="text/javascript">
    $(
    function () {
    //生成查询区域
    $ihelper.createItemList('ps_News', [m_news.Title], 'search');

    //生成查询区域
    var columns = [m_news.Title, m_news.Content
    //创建自定义列—编辑列
    , { name: 'Operate', '70px', css: 'center',
    custom:
    '<a class="icon edit" onclick="openEdit(${N_ID})" title="Edit" /><a class="icon view" onclick="openView(${N_ID})" title="View" />'
    }
    ];
    //生成列表
    $icontrol.grid("#pl_News", { columns: columns, showchk: true, chkfield: 'N_ID', sort: 'N_Date asc' }, 'fn_ns01');

    //绑定查询事件
    $('#btnSearch').click(function () {
    $ihelper.search(
    'fn_ns01', "#ps_News", "#pl_News");
    });
    //绑定删除事件
    $('#btnDel').click(function () {
    $ihelper.gridDel(
    'fn_nd04', 'pl_News');
    });
    });
    //打开编辑窗口
    function openEdit(key) {
    $ihelper.openModalWithKey(key,
    'nparam', 'u_demo_basefulledit', 600, 250);
    }
    //初始化编辑页面
    function initEdit() {
    //初始化页面方法
    $ihelper.initLoadPage('nparam', 'fn_ng03', function (data) {
    //生成编辑表单
    $ihelper.createItemList('pe_News', [m_news.Title, m_news.Content], 'edit', data);
    //给编辑表单外的控件赋值,记录主键id
    if (data && hasValue(data.N_ID))
    $(
    '#hidNID').val(data.N_ID);
    //绑定保持事件
    $('#btnSave').click(function () {
    $ihelper.save(
    'fn_ns02', "#editPanel", true, true, function () {
    $(
    '#btnSearch').click();
    });
    });
    //绑定取消事件
    $('#btnCancel').click(function () {
    //关闭模态窗口
    $icontrol.modalwinClose();
    });
    });
    }
    //打开查询窗口
    function openView(key) {
    $ihelper.openModalWithKey(key,
    'nparam', 'u_demo_basefullview', 600, 220);
    }
    //初始化查询页面
    function initView() {
    $ihelper.initLoadPage(
    'nparam', 'fn_ng03', function (data) {
    $ihelper.createItemList(
    'pv_News', [m_news.Title, m_news.Content, m_news.Date], 'view', data);
    $(
    '#btnCancel').click(function () {
    $icontrol.modalwinClose(
    );
    });
    });
    }
    </script>

    代码中主要用到了$ihepler页面帮助库和$icontrols控件库,详细的方法api说明请上Smart UI 查看

    最后的页面效果如下:

      所有增删改查功能完成,整个功能代码还是相当简洁和清晰的,当然这些代码还可以更一步的简化,在此只是一个引子,后面的实例介绍中会有更多丰富的内容。

          演示的例子地址连接代码下载地址 

       

  • 相关阅读:
    ABAP的HTTP_GET和Linux的curl
    SAP CRM点了附件的超链接后报错的处理方式
    一个JSON字符串和文件处理的命令行神器jq,windows和linux都可用
    如何在Ubuntu里安装Helm
    如何实现Windows宿主系统和虚拟机ubuntu系统文件互相访问
    如何安装Virtual Box的VBox Guest Additions扩展程序
    最简单的教程:在Ubuntu操作系统里安装Docker
    在ubuntun虚拟机里安装goLang语言编程环境
    hi35183e增加exfat文件系统的支持
    可以返回执行结果的system函数加强版本
  • 原文地址:https://www.cnblogs.com/zhh8077/p/1902094.html
Copyright © 2020-2023  润新知