天天看点
返回

ASP.NET原创框架十一-应用模块开发之页面UI

作者：散装码农

ASP.NET原创框架十一-应用模块开发之页面UI

ASP.NET原创框架十一-应用模块开发之页面UI

为方便页面前端开发封装了妹子UI也就是amazeui库

需要在页面使用该库只需要引导一下js即可

<link rel="stylesheet" href="<%=urlBefore%>/public/amazeui/amazeui/css/amazeui.min.css" />

<!--[if (gte IE 9)|!(IE)]><!-->

<script type="text/javascript" src="<%=urlBefore%>/public/amazeui/amazeui/js/jquery.min.js"></script>

<!--<![endif]-->

<script type="text/javascript" src="<%=urlBefore%>/public/amazeui/amazeui/js/amazeui.js"></script>

<script src="<%=urlBefore %>/public/amazeui/amazeui_Defined/script/amazeui.common.xn.js?ver=1"></script>

<script src="<%=urlBefore %>/public/amazeui/amazeui_Defined/script/amazeui.mobile.xn.js?ver=1"></script>

<!--引入layer使用-->

<script type="text/javascript" src="<%=GetResourceUrl(HttpContext.Current)%>/public/layer/mobile/layer.js"></script>

常用的布局和js代码

一、datagrid数据查询列表

页面代码如：

<body style="overflow: hidden;">

<div class="am-g">

<section data-am-widget="accordion" class="am-accordion am-accordion-gapped"

data-am-accordion='{ }'>

<dl class="am-accordion-item am-active">

<dt class="am-accordion-title">查询条件过滤</dt>

<dd class="am-accordion-bd am-collapse am-in">

<!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->

<div class="am-accordion-content" style="overflow-x: auto;">

<form id="pageForm">

<table class="tableForm datagrid-toolbar" style="margin-left: 10px; width: 1000px; height: 100%">

<tr>

<td>创建时间-开始</td>

<td>

<input name="createtime_Min" id="createtime_Min" name="createtime_Min" type="text" style="border: 1px solid #ccc; width: 152px;" data-am-datepicker readonly /></td>

<td>至</td>

<td>

<input name="createtime_Max" id="createtime_Max" name="createtime_Max" type="text" style="border: 1px solid #ccc; width: 152px;" data-am-datepicker readonly /></td>

<td>歌唱者</td>

<td>

<input id="singer" name="singer" type="text" style="border: 1px solid #ccc;" /></td>

<td>歌曲名</td>

<td>

<input id="songname" name="songname" type="text" style="border: 1px solid #ccc;" /></td>

<th>

<button type="button" class="am-btn am-btn-default am-btn-xs " onclick="search()"><span class="am-icon-search"></span>查询</button>

<button type="button" class="am-btn am-btn-default am-btn-xs " onclick="clearcontent()"><span class="am-icon-refresh"></span>清空</button>

</th>

</tr>

</table>

</form>

</div>

</dd>

</dl>

</section>

<div class="am-u-sm-12 am-u-md-6">

<div class="am-btn-toolbar">

<div class="am-btn-group am-btn-group-xs">

<button type="button" class="am-btn am-btn-default" onclick="add()"><span class="am-icon-plus"></span>新增</button>

<button type="button" class="am-btn am-btn-danger am-btn-xs " onclick="del()"><span class="am-icon-trash-o"></span>删除</button>

</div>

</div>

</div>

</div>

<div class="dataContainer">

</div>

<div id="popWindow"></div>

<div id="modeWindow"></div>

其中pageForm为查询条件，am-btn-toolbar为操作按钮区

dataContainer：为数据列表容器

popWindow:为弹出层容器

modeWindow:弹出层容器

列表生成js代码,在页面准备好后生成查询列表

使用该列表保证返回的json数据格式如下json串

服务端使用以下代码返回该格式数据

using(NodeDBEngine m_NodeDBEngine=new NodeDBEngine())

{

.。。。

int nPageSize = 10;

int nPageIndex = 1;

if (KeyIsOK(m_HH, "page"))

{

nPageIndex = Convert.ToInt32(m_HH["page"].ToString());

}

if (KeyIsOK(m_HH, "rows"))

{

nPageSize = Convert.ToInt32(m_HH["rows"].ToString());

}

bool bOK;

RecordReturn result = (RecordReturn)m_NodeDBEngine.XNGetSQLPageRecordVar(SQLString, nPageSize, nPageIndex, out bOK, m_varList.ToArray());

if (bOK)

{

m_ReturnJson.bOK = true;

m_ReturnJson.m_ReturnOBJ = new { total = result.RecordCnt, rows = result.data, pageSize = nPageSize };

}

else

{

m_ReturnJson.bOK = false;

m_ReturnJson.sMsg = "查询小站关键字记录失败";

}

return m_ReturnJson;

}

该json的样本如何

其中total:总行数,rows:为当前页数据,pageSize：

{

"total": 44,

"rows": [

{

"weight": 0,

"singer": "大壮",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/dzhuang.png",

"mp3file": "/public/music/data/wzhuang.mp3",

"blog_musics_nodeuuid": "16617757285200000003000",

"songname": "伪装",

"lrc": "/public/music/data/wzhuang.lrc",

"blog_musicgroupdata_nodeuuid": "16618573339220000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

},

{

"weight": 0,

"singer": "大壮",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/dzhuang.png",

"mp3file": "/public/music/data/cybu.mp3",

"blog_musics_nodeuuid": "16617757285280000003000",

"songname": "差一步",

"lrc": "/public/music/data/cybu.lrc",

"blog_musicgroupdata_nodeuuid": "16618573339150000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

},

{

"weight": 0,

"singer": "女生",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/rj.png",

"mp3file": "/public/music/data/wlrjyt.mp3",

"blog_musics_nodeuuid": "16617757285340000003000",

"songname": "我来人间一趟",

"lrc": "/public/music/data/wlrjyt.lrc",

"blog_musicgroupdata_nodeuuid": "16618573339080000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

},

{

"weight": 0,

"singer": "陈雅森",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/yan.png",

"mp3file": "/public/music/data/yan.mp3",

"blog_musics_nodeuuid": "16617757285410000003000",

"songname": "烟",

"lrc": "/public/music/data/yan.lrc",

"blog_musicgroupdata_nodeuuid": "16618573339010000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

},

{

"weight": 0,

"singer": "张茜",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/zhangqian.png",

"mp3file": "/public/music/data/ylhzhe.mp3",

"blog_musics_nodeuuid": "16617757285480000003000",

"songname": "用力活着",

"lrc": "/public/music/data/ylhzhe.lrc",

"blog_musicgroupdata_nodeuuid": "16618573338950000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

},

{

"weight": 0,

"singer": "苏潭潭",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/stt.png",

"mp3file": "/public/music/data/zcdrsheng.mp3",

"blog_musics_nodeuuid": "16617757285550000003000",

"songname": "这扯淡的人生",

"lrc": "/public/music/data/zcdrsheng.lrc",

"blog_musicgroupdata_nodeuuid": "16618573338890000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

},

{

"weight": 0,

"singer": "张茜",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/zhangqian.png",

"mp3file": "/public/music/data/rjmchu.mp3",

"blog_musics_nodeuuid": "16617757285610000003000",

"songname": "人间某处",

"lrc": "/public/music/data/rjmchu.lrc",

"blog_musicgroupdata_nodeuuid": "16618573338830000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

},

{

"weight": 0,

"singer": "大壮",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/dzhuang.png",

"mp3file": "/public/music/data/slnjdnr.mp3",

"blog_musics_nodeuuid": "16617757285670000003000",

"songname": "上了年纪的男人",

"lrc": "/public/music/data/slnjdnr.lrc",

"blog_musicgroupdata_nodeuuid": "16618573338780000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

},

{

"weight": 0,

"singer": "海来阿木",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/hlam.png",

"mp3file": "/public/music/data/rsrge.mp3",

"blog_musics_nodeuuid": "16617757285740000003000",

"songname": "人生如歌",

"lrc": "/public/music/data/rsrge.lrc",

"blog_musicgroupdata_nodeuuid": "16618573338720000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

},

{

"weight": 0,

"singer": "半吨兄弟",

"blog_musicgroups_nodeuuid": "16617953385760000003000",

"pic": "/public/music/data/bandunxiongdi.png",

"mp3file": "/public/music/data/wzysheng.mp3",

"blog_musics_nodeuuid": "16617757285800000003000",

"songname": "我这一生",

"lrc": "/public/music/data/wzysheng.lrc",

"blog_musicgroupdata_nodeuuid": "16618573338650000003000",

"createtime": "/Date(1661828533000)/",

"sitename": "散装码农",

"groupname": "中年人歌曲"

}

],

"pageSize": 10

}

列表JS代码如下：

<script>

//显示图片

function showPic(title, imgTitle, imgSrc) {

var iframeMode = $('<iframe src="/public/share/plugin/picbox/ShowPicture.html?imgSrc=' + imgSrc + '&imgTitle=' + imgTitle + '" width="100%" height="360px;" frameborder="0"></iframe>');

$('#modeWindow').window({

content: iframeMode,

title: title,

width: 800,

noButton: true,

});

}

//页面加载完毕执行

$(function () {

//定义数据列

其中 name:为返回数据行中的列名，displayName:为显示的列名，enabled:是否可用，width:宽度，format：格式,function(row)当函数格式时执行的函数返回格式串

var translateT = [

{

name: "action", displayName: "操作", enabled: true, width: 100, format: "func", func: function (row) {

var ss = "<button type='button' class='am-btn am-btn-default am-btn-xs am-text-secondary' onclick='setGroupDataWeight(\"" + row.blog_musicgroupdata_nodeuuid + "\",\"" + row.songname + "\")'><span class='am-icon-pencil-square-o'></span>设置歌曲权重</button>";

return ss;

}

}

,{ name: "songname", displayName: "歌名", enabled: true, width: 70 }

, { name: "singer", displayName: "歌者", enabled: true, width: 70 }

, { name: "weight", displayName: "权重", enabled: true, width: 70 }

, {

name: "pic", displayName: "歌者头像", enabled: true, width: 100, format: "func", func: function (row) {

return '<img width="80" src="' + row.pic + ' " onclick="showPic(\'歌者头像\',\'\',\'' + row.pic + '\')">';

}

}

, { name: "groupname", displayName: "所在歌曲分组", enabled: true, width: 70 }

, { name: "sitename", displayName: "所在小站", enabled: true, width: 70 }

, { name: "createtime", displayName: "创建时间", enabled: true, format: "JsonDate", width: 100 }

];

//列表在容器dataContainer中，

//datagrid json参数说明

//form:参数所在容器pageForm url:请求的url ，nPageIndex:初始请求页，那nPageSize:数据分页大小,queryParams:初始查询条件，translate：为列定义

myGoodPageOpts = $('.dataContainer').datagrid({

form: '.pageForm',//放置查询条件的表单

url: '/userblog/Getblog_musicgroupdata_RawJson.ajax?blog_musicgroups_nodeuuid=<%=blog_musicgroups_nodeuuid%>',

nPageIndex: 1,//当前页

nPageSize: 10,//每页显示数据条数

callbacks: null,

translate: translateT,

operate: [],

queryParams: {

a:'a'

},

});

});

</script>

二、确认窗口

$.confirm({

title: '提示',//窗口标题

content: '确定要添加:' + rows[0].nickname + '入用户组吗？',//内容

onSuccess: function () {

});

title:确认窗口标题

content：确认窗口的内容

onSuccess:确认后执行的函数

三、调用提示框

显示提示框

$.msgprogress({ msg: '正在添加...' });

msg:表示提示信息

关闭提示框

$.msgprogress('close');

四、信息提示框

$.alert({ content: res.sMsg });

content:要显示的提示信息

五、弹出页面

var iframeMode = $('<iframe src="/userblog/MenuItemsRecord.aspx?blog_mainmenus_nodeuuid=' + blog_mainmenus_nodeuuid + '" width="100%" height="600px;" frameborder="0"></iframe>');

$('#modeWindow').window({

content: iframeMode,

title: name + '子菜单管理',

width: 700,

noButton: true,

});

content:iframe内容

title:标题栏

width:宽度

noButton:true表示无按钮

六、弹出层

var content = $('<form class="am-form am-form-horizontal" id="form" method="post">' +

。。。+

'</form>');

$('#windows').window({

title: title,//窗口标题

content: content,

//width: 700,//弹出框宽度

onSuccess: function () {

//点确定执行

var type = content.find('#type').val();

var url = '';

if (type == "add") {

url = '/userblog/AddOneMainMenu.ajax';

} else {

url = '/userblog/EditOneMainMenu.ajax';

}

$.msgprogress({ msg: '正在' + title + '...' });

var options = {

url: url,

dataType: 'json',

success: function (result) {

$.msgprogress('close');

if (result.bOK) {

$('#windows').window('close');

myGoodPageOpts.datagrid('reload');

} else {

$.alert({ content: result.sMsg });

}

}

}

$(content).ajaxSubmit(options);

},

onClose:function(){

//点关闭后执行

}

);

七、关闭窗口

$('#windows').window('close');

八、刷新查询列表

myGoodPageOpts.datagrid('reload');

九、combox使用

$("#companyidEdit").combox({

url: "/CoreSYS.SYS/GetSelectCompany_RawJson.ajax",//企业

selectDataContainer: $("#companyidEdit"),

text: 'company',

value: 'sys_companys_nodeuuid',

width: 120,

onSelect: function () {

},

});

companyidEdit表示要设置为combox的input如

<input name="sys_companys_nodeuuid" id="companyidEdit" type="hidden" style="border: 1px solid #ccc;" />

url:为获得combox数据的访问地址

selectDataContainer:表示combox的容器

text:返回数据的显示串

value:返回显示数据的值

width:宽度

onSelect：选择后执行的函数

以上combox返回的数据格式为

[

{

“company”:"成都"，

“sys_companys_nodeuuid“：xxxxxx

},

{

“company”:"重庆1"，

“sys_companys_nodeuuid“：yyyyyy

}

,

。。。

]

十、列表查询与查询条件清空

//查询

function search() {

myGoodPageOpts.datagrid('load', $.serializeObject($('#chauserForm')));

}

//清空条件

function clearcontent() {

$('#chauserForm').find("input,select").val("");

}

下集介绍通过代码工厂生成代码

模块开发 .net
上一篇: python-DButils
下一篇: 传统IT开发与低代码开发争议白热化，技术开发规则或将重构？传统IT开发与低代码开发，二者之间比较明显的特征对比：

继续阅读