servlet入门：前端操作结合数据库，实现数据库部门表单数据增，删，改功能

第一个完整的web probject,值得记录下来的一点心得；
还是老规矩，不啰嗦，直接上代码；
第一部分：创建一个web project ,导入jar包，配置文件等；

配置文件部分：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>deptMangage</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	 <servlet-name>dept</servlet-name>
  	 <servlet-class>com.emp.servlet.GeptServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
  		<servlet-name>dept</servlet-name>
  		<url-pattern>/dept.do</url-pattern>
  </servlet-mapping>
 
</web-app>

**接着就是第二部分，前端页面，我是直接导入js文件，之前有用jquery写过一个表格组件，就直接拿过来用了，js，css部分（还要导入一个js文件，直接下载就好了）
**
js部分：

;(function ($) {

	var myGridFun = function ($dom,opts) {
		this.$grid = $dom;
		this.$opts = opts;
		this.defaultOpt = {
			//斑马线
			zebraCrossing:true,
			width:'100%',
			//是否支持多选
			multiple : false,
			//选择列是否显示
			selectColumn:false,
			//是否支持编辑
			edited:false
		}
		//合并参数
		var setting = $.extend({}, this.defaultOpt, opts);

		this.setting = setting;

		this.init();
		
	}

	myGridFun.prototype = {
		init:function () {
			
			this.initGridDom();
		},
		//初始化表格dom
		initGridDom : function () {
			this.loadGridHead();

			var dataSource = this.setting.dataSource || [];
			this.loadDateDom(dataSource);

			gridEvent.editEvent(this);
		},
		//初始化表头
		loadGridHead : function () {
			
			this.$grid.html("");
			
			var columns = this.setting.columns || [];
			var codes = [];
			//拼接grid表头
			codes.push("<thead>");
			/*
				<td class="select-column"><input type="checkbox" name="dataCheckbox"></td>
			*/
			codes.push("<tr>");
			//加载多选框
			if (this.setting.selectColumn === true && this.setting.multiple === true) {
				codes.push('<th class="select-column">');
				codes.push('<input type="checkbox" name="checkboxAll">');
				codes.push('</th>');
			}
			
			for (var i = 0; i < columns.length; i++) {
				var c = columns[i];
				//取出配置的字段和标题
				var field = c.field,title = c.title;
				codes.push("<th field='"+field+"'>");
				codes.push(title);
				codes.push("</th>");
			}
			codes.push("</tr>");
			codes.push("</thead>");
			
			
			
			//追加表头
			this.$grid.append(codes.join(""));
			//设置表格的宽度
			this.$grid.css("width",this.setting.width);

			//加载列头复选框事件
			if (this.setting.selectColumn === true && this.setting.multiple === true) {
				var check = this.$grid.find('input[type="checkbox"][name="checkboxAll"]');
				gridEvent.checkboxAllEvent(check,this);
			}
		},
		//单行数据dom创建
		createDataTrDom : function  (data) {
			var _this = this;
			//获取配置信息
			var columns = this.setting.columns || [] ;
			var ds = data;//{name:'秋香',age:'18',hobby:'唐伯虎'},  ds.field   ds['name']
			var $tr = $("<tr class='datagrid-row'>");
			//在tr上缓存当前行的记录
			$tr.data("row-data",ds);

			//加载多选框
			if (this.setting.selectColumn === true && this.setting.multiple === true) {
				$tr.append('<td class="select-column"><input type="checkbox" name="dataCheckbox"></td>');
			}

			//查询grid所需要的字段
			for (var j = 0; j < columns.length; j++) {
				//获取字段
				var field = columns[j].field;
				//获取字段在数据中所对应的值
				var value = ds[field];
				//判断是否存在渲染函数
				if ($.isFunction(columns[j].rendering)) {
					//执行渲染回调函数
					value = columns[j].rendering.call(_this,ds,$tr);

					//value = columns[j].rendering(ds,$tr)
				}

				//td添加到tr中
				$tr.append("<td field='"+field+"'>"+value+"</td>");
			}

			return $