MiniUI的多表整合crud

    这几天学习了一些关于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路径

<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是我的代码资源，大家可以去下载