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

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

[b]第四步，配置Fncode[/b]

　　与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角色权限配置的在后续文章中介绍。

[b]第五步，设置实体[/b]

　　前台设置实体是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。

[b]第六步，创建内容页面[/b]

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

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

　　BaseFullEdit.htm：编辑页面，弹出页面

　　BaseFullView.htm：查看页面，弹出页面

　

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

　　

代码

<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" 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 查看

最后的页面效果如下：







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

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