MiniUI小结和感悟

   在学习了miniui将近半个月以后，迎来了在公司的考核。考核之前信心满满，考核过后才知道自己几斤几两。在考核的过程中和后期对考核内容的修改中，有了一些感悟，不吐不快。

        1.考核内容和之前分享的技术差不多，就是多了一个分页，其次需要做出树形结构与右边菜单的左右联动，并需要多行删除，表单验证，条件模糊查询，以及基本的增加，删除，修改和查询，给你两小时做完。大致内容就是这些。

        2.我不得不在这里讲一下，就算在考核前你会了所需的技能，但是依旧不能掉以轻心。刚开始搭环境，编写相应的配置文件，写查询界面进行测试。这个时候就出现问题了，我的当前项目和之前自己做的项目产生了冲突，找了好久的错误都没找到，最后才在同事的帮助下弄好，说来也惭愧。。。。

        3.首先说一下多行删除，我觉得是比较麻烦的。

 function onRemoveOrder(){    //删除按钮的点击事件
        var datasOrder = grid.getSelecteds();   //获取当前选中的多行数据
		if(datasOrder==''){              //进行判断
			nui.alert('请选择要作废的组织信息!');
			return ;
		}
		nui.confirm("确定作废组织信息？", "系统提示", function(action){     //弹出一个选择提示框
			if(action=="ok"){
		    	nui.get("btnremoves").disable(true);     //如果成功让当前按钮失效
		    	 $.ajax({
		            url: "com.lxt.eos.component.orgcomponent.deleteOrg.biz.ext",
		            type: 'POST',
		            data: nui.encode({params:datasOrder}),
		            cache: false,
		            contentType:'text/json',
		            success: function (text) {
		            	var reCode = text.reCode;
		            	grid.reload();
		            	if(reCode!=null&&reCode[0]=='0'){
		            		grid.reload();
		            	}
		            	searchData();
		            },
		            error: function (jqXHR, textStatus, errorThrown) {
		                alert(jqXHR.responseText);
		            }
		        });
		    	
		    	
		    	nui.get("btnremoves").enable(false);   //执行完成让当前按钮恢复功能
		    }
		});
		
      }

  这里我要说一下，首先我直接获取当前选中的多行的数据，通过json传到后台。

public void deleteOrg(DataObject[] params) {

		for(int i = 0; i < params.length; i++) {
			DataObject dataObject = params[i];
			getDASTemplate().executeNamedSql("com.lxt.eos.orgdataset.newnamingsql.deleteOrg",dataObject.get("org_id"));	
		}
	}

 其实多行删除就是一个循环删除的问题，在构件那边你需要将dataobject的参数值设置为params，其实就是换一下值就行。

  <div id="org_select" class="nui-treegrid" style="width:100%;height:96%;" sortMode="client"
			    showPager="true" pageSize="10" sizeList="[10,20,50,500]" allowAlternating="true" multiSelect="true"
			    url="com.lxt.eos.component.orgcomponent.orgSelect.biz.ext" 
			    dataField="datas">

其次，这里就是分页了，或者说这里就是分页的控件。showPager--是否显示分页控件，pageSize--显示分页的条数。这就是最重要的两个参数。

   最后有点小问题的就是树形结构的左右联动了，因为没啥变化，所以我直接在那里加了一个条件模糊查询。

select * from Aa_org
       where 1=1
        <isNotNull prepend="AND" property="org_id">
	     	 org_id like '%'+#org_id#+'%'
	     </isNotNull>
 		<isNotNull prepend="AND" property="org_name">
		 org_name like '%'+#org_name#+'%'
	    </isNotNull>

就是在sql语句这里加上相应的ifnotnull进行判断就行，在页面的时候，nui会有一个机制，点击模糊查询会走这个方法，点击左右联动会走这个方法，

 function searchData(){      //   searchData()方法
		//var qdata = queryForm.getData();
		//grid.load({params:qdata});
		var org_name = nui.get("org_name").value;  //获取你文本框的值
	    grid.load({params:{org_name:org_name}});  //重载前将获取到的name值提交到数据库
	}

如果你没有条件判断的话，，那就直接走我注释掉的两行语句，因为这样的话，当你请求想刷新页面的时候走这个方法就行了，你就可以把它当做是刷新。

      接下来我觉得才是我通过考核学到的东西，可以称之为经验。  

1.考核的时候不能慌，那天早上我吃的是葱油饼，然而考核的时候经常报不知名的错误，还一下解决不了，，麻烦同事给我看，同事虽然不慌，但弄得比较慢，可我慌，慌的是时间在不停地走。。。。结果我妥妥的晚了两个小时交，，，不过所幸的是主管没怎么就这个说我。。还好还好。

2.团队协作，我这边加我是两个人考核，我先通过svn交上去，主管那个时候没说什么，事后说我要注意团队协作，希望听到的是两个人一起说我们做完了。难受，，，

3,，做东西敲代码要尽量与需求契合。当天考核给我了一个文档，包括界面截图，字段说明等等，然后我做的时候因为不太喜欢做前端页面的东西，然后就做把页面做的很不细致，与需求截图上的出入比较大。比如说：格式不一样，字体不一样，效果不一样等等。最后还是要我修改。。。

4.写界面要验证。那天验收的时候，，我的天，主管一上来就直接各种非法操作，，，幸好我做了几个简单的验证，可是着实经不起他想找bug的决心，然后在模糊查询的时候只做了后面的查询，大家看到的模糊查询是我修改过的。总而言之，要提交前你必须要充分在你的思维度把问题考虑细致。

5.不要抱有侥幸心理，做出来了就是做出来了，没有就说没有，做一个诚实的娃。

     接下来就是一些针对考核的一些小优化和心得了。

1.也就是验证的问题。

   之前我都是js进行验证，然而我在发博客前弄了另外一种方法，我分别拿出来。。虽然算不上高深。

      

 if (org_id == null || org_id == '') {
				nui.alert('组织编号不能为空');
			}else if(org_id.length>10){
				nui.alert('组织编号长度不能大于10');
		    } else if (org_name == null || org_name == '') {
				nui.alert('组织名称不能为空');
			}else if(org_name.length>10){
				nui.alert('组织名称长度不能大于10');
		    }else if (org_code == null || org_code == '') {
				nui.alert('组织代码不能为空');
			}else if(org_code.length>10){
				nui.alert('组织代码长度不能大于10');
		    } else if (org_parent == null || org_parent == '') {
				nui.alert('上级组织不能为空');
			}else if(org_parent.length>10){
				nui.alert('上级组织长度不能大于10');
		    } else if (org_people == null || org_people == '') {
				nui.alert('创建人员不能为空');
			}else if(org_people.length>10){
				nui.alert('创建人员长度不能大于6');
		    } else if (create_time == null || create_time == '') {
				nui.alert('创建时间请使用合适的时间格式');

还有一个就是前端验证了。

<td>组织编号:<input type="text" name="org_id" class="nui-textbox" emptyText="输入组织编号" id="org_id"
			 required="true" vtype="maxLength:10;float"  requiredErrorText="账号不能为空" maxLengthErrorText="帐号不能大于十个字符"
			 floatErrorText="必须是数字" onvalidation="onOrgIdValidation">
			</td>
			<td id="org_id_error" class="errorText"></td>
			
			<td>组织名称:<input type="text" name="org_name" class="nui-textbox"id="org_name"
			 required="true" vtype="maxLength:10"  requiredErrorText="组织名称不能为空" maxLengthErrorText="组织名称不能大于十个字符"
			 onvalidation="onOrgNameValidation">
			</td>
			<td id="org_name_error" class="errorText"></td>

function updateError(e) {
            var id = e.sender.name + "_error";
            var el = document.getElementById(id);
            if (el) {
                el.innerHTML = e.errorText;
            }
        }

 var form  = new mini.Form("#form1");
    	    form.validate();
            if (form.isValid() == false) return;
            //提交数据
            var data = form.getData();      
            var json = mini.encode(data);

这就是在页面进行判断，也就是直接输入相关信息后直接出来判断，成功就不显示，错误就显示。

这就是大致效果，当然，输对了就没那么多事情了。

2.也就是用户体验的问题，有的时候明明不能这么做，或者说点击了这个需要再次点击，可是你的页面刷新了。。这就很难受了。所以说要注意页面上的优化和体验。避免小的问题和瑕疵。考核有惊无险。给我的教训就是要细心，做东西要紧跟需求，汲取失败中的经验。

  希望我还有发这些博客的机会。我一定会加油。。。