这几天学习了一些关于MiniUI的知识,下面做点总结。 希望看到的人能够对你们有用。
我是基于已经成熟的一套普元EOS平台进行的开发,大家如果没有用过普元EOS的话那就算了。首先是我的主界面
这上面显示的是多表的信息,功能主要包括增加相关信息,删除,修改,模糊查询。
1.数据的显示,也就是查询功能。<div class="nui-fit">
<div id="datagrid1" class="nui-treegrid" style="width:100%;height:100%;" sortMode="client"
showPager="true" pageSize="20" sizeList="[10,20,50,500]" allowAlternating="true" multiSelect="true"
url="com.primeton.eos.organduser.component.OrgAndUser.selectOrgAndUser.biz.ext"
dataField="datas">
<div property="columns" width="20">
<div type="id" name="id" field="id">序号</div>
<div type="checkcolumn"></div>
<div name="org_id" field="org_id" id="org_id" allowSort="true" width="100">订单编号</div>
<div name="org_name" field="org_name" id="org_name" allowSort="true" width="100">订单名字</div>
<div name="create_time" field="create_time" id="create_time" allowSort="true" width="100" dataType="date" dateFormat="yyyy-MM-dd">订单时间</div>
<div name="org_sort" field="org_sort" id="org_sort" allowSort="true" width="100">排序</div>
<div name="org_level" field="org_level" id="org_level" allowSort="true" width="100">机构等级</div>
<div name="org_parent" field="org_parent" id="org_parent" allowSort="true" width="100">所属机构</div>
<div name="user_id" field="user_id" id="user_id" allowSort="true" width="100">用户ID</div>
<div name="user_name" field="user_name" id="user_name" allowSort="true" width="100">用户名</div>
<div name="ctime" field="ctime" id="ctime" allowSort="true" width="100" dataType="date" dateFormat="yyyy-MM-dd">用户时间</div>
<div name="user_state" field="user_state" id="user_state" allowSort="true" width="100">用户状态</div>
<div name="phone" field="phone" id="phone" allowSort="true" width="100">电话</div>
</div>
</div>
</div>
</div>
这里面有个url,里面有相关的路径,也就是你的sql路径
<div class="nui-fit">
<div id="datagrid1" class="nui-treegrid" style="width:100%;height:100%;" sortMode="client"
showPager="true" pageSize="20" sizeList="[10,20,50,500]" allowAlternating="true" multiSelect="true"
url="com.primeton.eos.organduser.component.OrgAndUser.selectOrgAndUser.biz.ext"
dataField="datas">
<div property="columns" width="20">
<div type="id" name="id" field="id">序号</div>
<div type="checkcolumn"></div>
<div name="org_id" field="org_id" id="org_id" allowSort="true" width="100">订单编号</div>
<div name="org_name" field="org_name" id="org_name" allowSort="true" width="100">订单名字</div>
<div name="create_time" field="create_time" id="create_time" allowSort="true" width="100" dataType="date" dateFormat="yyyy-MM-dd">订单时间</div>
<div name="org_sort" field="org_sort" id="org_sort" allowSort="true" width="100">排序</div>
<div name="org_level" field="org_level" id="org_level" allowSort="true" width="100">机构等级</div>
<div name="org_parent" field="org_parent" id="org_parent" allowSort="true" width="100">所属机构</div>
<div name="user_id" field="user_id" id="user_id" allowSort="true" width="100">用户ID</div>
<div name="user_name" field="user_name" id="user_name" allowSort="true" width="100">用户名</div>
<div name="ctime" field="ctime" id="ctime" allowSort="true" width="100" dataType="date" dateFormat="yyyy-MM-dd">用户时间</div>
<div name="user_state" field="user_state" id="user_state" allowSort="true" width="100">用户状态</div>
<div name="phone" field="phone" id="phone" allowSort="true" width="100">电话</div>
</div>
</div>
</div>
</div>
<select id="SelctOrgAndUser" parameterClass="java.lang.String" resultClass="commonj.sdo.DataObject">
select ao.*,au.*,au.create_time as ctime from Aa_org_info ao left join Aa_user_info au on ao.org_id=au.belong_org_id
</select>
<delete id="deleteOrgAndUser" parameterClass="java.util.Map">
delete from Aa_org_info where org_id=#org_id#;
delete from Aa_user_info where user_id=#user_id#;
</delete>
<insert id="insertOrgAndUser" parameterClass="java.util.Map">
insert into Aa_org_info values(#org_id#,#org_name#,#create_time#,#org_sort#,#org_level#,#org_parent#);
insert into Aa_user_info values(#user_id#,#user_name#,#belong_org_id#,#ctime#,#user_state#,#phone#);
</insert>
<update id="updateOrgAndUser" parameterClass="java.util.Map">
update Aa_org_info set org_name=#org_name#,create_time=#create_time#,org_sort=#org_sort#,org_level=#org_level#,org_parent=#org_parent# where org_id=#org_id#;
update Aa_user_info set user_name=#user_name#,belong_org_id=#belong_org_id#,create_time=#ctime#,user_state=#user_state#,phone=#phone# where user_id=#user_id#;
</update>
我这次的数据库是sqlserver,采用的是两张表之间的值相等来建立联系,没有主外键。里面包括我的查询,修改,删除,增加的方法,说实话就是单表的sql语句多些一个。
其实比较绕的是jQuery上面,或许是我学的不好吧。。。
//删除订单
function onRemove(){ //删除的点击事件
var datas = grid.getSelecteds(); //获取选中行
if(datas==null||datas.length!=1){ //判断
nui.alert('请选择一条要作废的订单!');
return ;
}
var org_id = datas[0].org_id;//获取要删除的订单ID
var user_id = datas[0].user_id;//获取要删除的用户ID
nui.confirm("确定作废选中订单?", "系统提示", function(action){//弹出一个提示框
if(action=="ok"){
nui.get("btnremove").disable(true);//禁用叫btnremove的按钮
flx.mask();//弹出遮罩层
$.ajax({//执行ajax方法
url: "com.primeton.eos.organduser.component.OrgAndUser.deleteOrgAndUser.biz.ext",//请求的路径
type: 'POST',//请求类型
data: nui.encode({params:{org_id:org_id,user_id:user_id}}),//请求的格式和要储存的字段
cache: false, //是否缓存
contentType:'text/json', //文本类型
success: function (text) { //成功后执行的方法
flx.unmask(); //解除遮罩层
var reCode = text.reCode; //获取文本信息的编码进行重新编码
grid.reload();//重装页面
if(reCode!=null&&reCode[0]=='0'){
grid.reload();
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText); //弹出相应的解决信息
}
});
nui.get("btnremove").enable(false); //启用该按钮
}
});
}
我觉得我写的算是比较详细的注释了,大家不懂的就去看我的代码咯。这只是拿出一个删除的案例来做解析。
接下来贴出我的其他前端逻辑,不懂的可以留言咯。
//修改订单状态
function onAddOrder(){ //添加的按钮
nui.open({ //打开相应的。。。
url: "orderandusersave.jsp",//进入这个jsp
title: "订单录入", width: "1200px", height: "60%",//给这个jsp设置简易的框高
ondestroy: function(){ //销毁时会调用的方法
searchData();//这里是我重载的方法,也就是刷新当前页面,执行一次查询功能
}
});
}
//对订单数据进行查询和修改
function edit(){
var datas = grid.getSelecteds(); //获取当前选中行
if(datas==null||datas.length!=1){ //判断
nui.alert('请选择一条数据');
return ;
}
/* var id = datas[0].id; */
nui.open({
url: "orderanduserupdate.jsp", //打开相应的jsp页面
title: "订单修改", width: "800px", height: "60%",
onload: function () {
var iframe = this.getIFrameEl();
iframe.contentWindow.setData(datas); //调用子页面的SetData(data)方法
},
ondestroy: function (action) {
if (action=="ok")
grid.reload(); //重装
searchData(); //刷新当前页面
}
});
}
最后是一个修改页面的逻辑,比较重要吧。
function setData(datas){//方法名必须和之前的一样
data = nui.clone(datas);//克隆后才能使用
nui.get("org_id").setValue(data[0].org_id);//获取当前页面文本的ID,往里面添加自己传过来的值
nui.get("org_name").setValue(data[0].org_name);
nui.get("create_time").setValue(data[0].create_time);
nui.get("org_sort").setValue(data[0].org_sort);
nui.get("org_level").setValue(data[0].org_level);
nui.get("org_parent").setValue(data[0].org_parent);
nui.get("user_id").setValue(data[0].user_id);
nui.get("user_name").setValue(data[0].user_name);
nui.get("belong_org_id").setValue(data[0].belong_org_id);
nui.get("ctime").setValue(data[0].ctime);
nui.get("user_state").setValue(data[0].user_state);
nui.get("phone").setValue(data[0].phone);
}
function onupdate(){
var org_id = nui.get("org_id").value;//获取你修改的文本框的值
var org_name = nui.get("org_name").value;
var create_time = nui.get("create_time").value;
var org_sort = nui.get("org_sort").value;
var org_level = nui.get("org_level").value;
var org_parent = nui.get("org_parent").value;
var user_id = nui.get("user_id").value;
var user_name = nui.get("user_name").value;
var belong_org_id = nui.get("belong_org_id").value;
var ctime = nui.get("ctime").value;
var user_state = nui.get("user_state").value;
var phone = nui.get("phone").value;
$.ajax({ //和前文一样,调用相应的方法即可。
url:"com.primeton.eos.organduser.component.OrgAndUser.updateOrgAndUser.biz.ext",
type: 'POST',
data: nui.encode({params:{org_id:org_id,org_name:org_name,create_time:create_time,org_sort:org_sort,org_level:org_level,org_parent:org_parent,user_id:user_id,user_name:user_name,belong_org_id:belong_org_id,ctime:ctime,user_state:user_state,phone:phone}}),
cache: false,
contentType:'text/json',
success: function(text){
var resultjson = nui.decode(text);
if(resultjson.exception==null){
window.CloseOwnerWindow();
}else{
nui.alert("确定修改订单?", "系统提示", function(action){
if(action == "ok"||action == "close"){
alert("");
}
接下来我就去把我的代码贴出来哈,大家有问题直接留言我可以解决。以后学习了更多再拿出来和大家分享。
http://download.csdn.net/download/t_james/10128786是我的代码资源,大家可以去下载