告别aspx，高性能快捷开发 — JQuery Smart UI 快捷开发实例应用（一）入门【后篇】...

最新推荐文章于 2020-11-22 03:55:21 发布

weixin_30556161

最新推荐文章于 2020-11-22 03:55:21 发布

阅读量137

点赞数

文章标签： ui javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/zhh8077/archive/2010/12/10/1902094.html

版权

　　上篇把服务端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", width: '150px', valid: true, validops: { required: true, range: [3, 50]} }
, Content: { field: "N_Centent", name: "Content", width: '380px', ctr: 'textarea', valid: true,

validops: { required: true, range: [20, 1000]} }
, Date: { field: "N_Date", name: "Create Date",sort:true, width: '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 ' , width: ' 70px ' , css: ' center ' ,
custom: ' <a class="icon edit" οnclick="openEdit(${N_ID})" title="Edit" /><a class="icon view" οnclick="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 查看

最后的页面效果如下：

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

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

转载于:https://www.cnblogs.com/zhh8077/archive/2010/12/10/1902094.html

weixin_30556161

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
告别aspx，高性能快捷开发 — JQuery Smart UI 快捷开发实例应用（一）入门【后篇】...

　　上篇把服务端Bll层的内容完成了，下面就开始UI层的开发，打造简洁而“清爽”的功能页面.第四步，配置Fncode　　与BLL后台方法对应，在UI层进行FnCode的配置，位置在：Config/FnCode.xml中。 <Module name="UIDemo"> <BR name="BRNews"> <F...
复制链接

扫一扫