Servlet项目之销售合同项目(五)

View

到此为止，后端的代码已经都完成了，接下来就是我们的前端代码了，其实对于一个后端开发人员，前端我们不用那么精通，但是至少要做到看到代码就懂，特别是JavaScript，如果JavaScript玩的溜，那没什么好说的了，上去就是一顿敲，可能很多问题JavaScript就可以解决了，根本用不着Java出马，哈哈，这里没有说JavaScript是Java小弟的意思，至少两者结合起来，能搞懂，Servlet基本就没啥问题了，剩下的就是自己一点点再挖掘，自己再补充，让自己的项目锦上添花了。

之前有提到我们的前端页面是由layui渲染的，虽然layui在前端算不上很牛的框架，整体看起来也很朴素，但是API讲解的真的非常的详细又详细又详细，建议大家直接登录官网查看，使用细节我就不讲啦，因为直接套代码其实也很简单，这里我主要展示一下userList，分页查询用到的layui框架构成的javascript代码,至于上面的选框的样式，大家可以自行去官网下载使用啦，戳 Layui官网
声明一下，我这不是在打广告，哈哈哈，很实用，分享给大家

<script>
	/*使用layui的表格,日期,jquery和弹出层对象*/
	layui.use(['table','laydate','jquery','layer'],function() {
		var table = layui.table;
		var laydate = layui.laydate;
		var $ = layui.jquery;
		var layer = layui.layer;
		var deleteUser = function(ids,index) {
			ids = JSON.stringify(ids);
			$.ajax({
                type: 'post',
                url: '/crs/user.do?method=delUser',
                data: {'ids':ids},
                success: function (data) {
                	data = $.parseJSON(data)
              	  if(data.code == '200') {
      			    layer.msg('DELETE DONE', { icon: 1 }, { time: 1000 });
              	  } else if(data.code == '10004') {
              		layer.msg(data.message, { icon: 1 }, { time: 1000 });
              	  }
              	$("#searchBtn").click();
                },
                error: function (data) {
                    layer.msg('NET CONNECTED FAILED', { icon: 2 }, { time: 1000 });
                }
          	});
		}
	
		table.render({
			id: 'userTableId',
			elem: '#userTable',
			method: 'post',
			height: 515,
			width:780,
			even: true, //开启隔行背景
			url: '/crs/user.do?method=userList&type=ajax',
			cellMinWidth: 40,//全局定义单元格最小宽度
			toolbar: '#headerBar',
			cols: [[
 				{type:'checkbox',width:40, unresize:true, align:'center', height:40},
				{field: 'id', width:80, title: 'ID',  sort: true},
 				{field:'userName', width:150, title: 'User Name', sort: true},
 				{field:'password', width:150, title: 'Password', sort: true},
				{field:'realName', title: 'Real Name', width:150,  sort: true,unresize:true},
 				{fixed: 'right', width:200, title:'操作', toolbar: '#rowBar'}
			]], 
			page : true,//分頁
			response: {
				statusCode:200//重新規定成功的狀態碼為200，table組件默認爲0
			},
			parseData: function(result) {//將返回的數據解析成table組件所支持的格式
				return {
					"code": result.code,//解析接口狀態
					"msg": result.message,//解析返回的文本
					"count": result.data.count,
					"data": result.data.data
				};
			}
		});
		
		$("#searchBtn").click(function() {
			var userName = $("#userName").val();
			var realName = $("#realName").val();
			
			table.reload('userTableId',{
				where: {
					'userName': userName,
					'realName': realName,
				},
				page: {
					curr: 1
				}
			});
		});
		
		table.on('toolbar(userTable)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id);
			obj.del;
			switch(obj.event){
		    case 'add':
		    	var index = layer.open({
					type:2,
					maxmin:true,
					skin: 'layui-layer-lan',
					title:'Add User',
					area:["30%","80%"],
					content:'/crs/view/user/addUser.jsp',
			  		cancel:function(){
						//当关闭弹出层进行函数回调
						layer.msg("Closed");
					},
				})
		    break;
		    case 'del':
		    	layer.confirm('Please ensure to delete selected data', function(index){
             		layer.close(index); 
			    	//向服务端发送删除指令
             		var ids = new Array();
    		    	for (var i= 0; i< checkStatus.data.length; i++) {
    		    		ids.push(checkStatus.data[i].id);
    				}
    		    	deleteUser(ids);
    		    	layer.close(index);	
			    });
		    break;
		  };
			
		})
		
		table.on('tool(userTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			  var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的DOM对象
			  
			  if(layEvent === 'del'){ //删除
			    layer.confirm('Please ensure to delete the data', function(index){
			    	obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			    	//向服务端发送删除指令
			    	var ids = new Array();
			    	ids.push(data.id);
			    	deleteUser(ids);
					layer.close(index);			    	
			    });
			  } else if(layEvent === 'edit'){ //编辑
			    layer.open({
			    	type: 2, 
			    	maxmin:true,
					skin: 'layui-layer-lan',
			    	title:'Edit User',
					area:['500','650'],
					zIndex: 6666666,
				  	content: '/crs/user.do?method=toEditUser&id=' + data.id,//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
			  		cancel:function(){
						//当关闭弹出层进行函数回调
						layer.msg("Closed");
					}
				})
			  } 
			});
	});
</script>

---

小结

首先，对看完整篇文章的小伙伴们表示感谢，可能文章或者代码有些不足的地方，还请见谅啦，大家也可以提出来相互学习，写这篇文章的初衷主要是给初学的小伙伴们一个参考，网上有很多项目文章，但是很多没有讲的很细，而且前后不能连贯起来，或者说直接就一股脑上代码了，并没有什么太大的帮助，这个代码我是有精简的，因为完整版的代码量实在是太大了，哈哈哈，如果全丢上去，还不得再写5篇，代码多了，大家看着都眼花，索性抽取其中的一小部分，这样理解起来相对容易。

有能力的小伙伴可以参照我们上面的图，举一反三，做一个功能性强大一点，完整一些的项目，统计分析这一块，大家可以戳 Echart官网
可以做出类似于下面的很酷炫的报表哟，而且理解起来比较简单，上手很容易，AntV也不错。

好啦，文章也敲完了，已经凌晨了，有熬夜的小伙伴早些休息啦~