基于上文的easyui页面 —— html代码

<div id="insertbutton" style="display: none">
		<a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="add" onclick="newUser()">新增</a> 
		<a data-options="iconCls:'icon-edit' ,plain:true" class="easyui-linkbutton" id="update" onclick="editUser()">修改</a> 
		<a data-options="iconCls:'icon-clear',plain:true" class="easyui-linkbutton" id="delete_submit">删除</a>　　　　    

		
		
	</div>
	<div id="dlg" class="easyui-dialog"
		style="width:350px;height:520px;padding:10px 20px" closed="true"
		data-options="buttons:'#bb2',modal:true" hidden="hidden">
		<form id="form" class="easyui-form" data-options="novalidate:true">
			<table cellpadding="8" data-options="nowrap:false">
		
			  <div class="fitem">
				<input name="column1" class="easyui-validatebox textbox" type="hidden" >
			  </div>
	
				<tr>
					<td>姓名：</td>
					<td><input class="easyui-textbox" id="update_name"   data-options="required:true,missingMessage:'不能为空'" onblur="shiqu()" name="column2"></td>
				</tr>
				<tr>
					<td>姓名全拼：</td>
					<td><input class="easyui-textbox" id="update_nameAll" data-options="required:true,missingMessage:'不能为空'" name="column3"></td>
				</tr>
				<tr>
					<td>性别：</td>
					 <td><select class="easyui-combobox" name="column4" id="update_sex" style="width:163px;" editable="false" data-options="required:true" >
								<option value="男">男</option>
								<option value="女">女</option>
						</select>
					</td>
				</tr>
				<tr> 
					<td>身份证类型：</td>
					<td><select class="easyui-combobox" id="update_cardType" name="column5" style="width:163px;" editable="false" data-options="required:true,missingMessage:'不能为空'" >
							<option>居民身份证</option>
							<option>士官证</option>
							<option>学生证</option>
							<option>驾驶证</option>
							<option>护照</option>
							<option>港澳通行证</option>
					</select></td>
				</tr>
				<tr>
					<td>身份证号码：</td>
					<td><input class="easyui-textbox" id="update_cardnum"  name="column6"></td>
				</tr>
				<tr>
					<td>出生日期：</td>
					<td><input class="yieasyui-datebox" required="required"
						id="update_birthday" data-options="required:true,missingMessage:'不能为空'" editable="false" name="column7" ></td>
				</tr>
				<tr>
					<td>手机号码：</td>
					<td><input class="easyui-textbox" id="update_phone" data-options="required:true,missingMessage:'不能为空'" name="column8"></td>
				</tr>
				<tr>
					<td>电子邮箱：</td>
					<td><input class="easyui-textbox" id="update_email" data-options="required:true,missingMessage:'不能为空'" name="column9"></td>
				</tr>
			</table>
		</form>
		<div id="bb2">
			<a href="#" class="easyui-linkbutton"  iconCls="icon-ok" onclick="saveUser()">提交</a> <a
				href="#" class="easyui-linkbutton" iconCls="icon-cancel"
				onclick="javascript:$('#dlg').dialog('close')">取消</a>
		</div>
	</div>
	<!-- <div id="dlg-delete" class="easyui-dialog"
		style="width:200px;height:150px;padding:20px"
		data-options="title:'删除',buttons:'#bb1',modal:true">
		<div id="bb1">
			<a href="#" class="easyui-linkbutton" id="delete_submit" iconCls="icon-ok">确认</a> <a
				href="#" class="easyui-linkbutton" onclick="$('#dlg-delete').dialog('close')"  iconCls="icon-cancel">取消</a>
		</div>

	</div>
 -->


	
	<div class="easyui-layout" style="width:600px;height:600px;" fit=true>

        <div data-options="region:'center'" style="height: 500px;">
            <div id = "dg"></div>
        </div>
    </div>

这里就是html内容，接下来的是js代码

$(function(){
	Init();//打开页面就去查询了   
	
	
 });
 function Init(){
   
   
   $('#dg').datagrid({ 
	   
	  url:"/users/list",  
	  
	    columns:[[    
            {field:'column1',title:'id',width:100,hidden:true},  
	        {field:'column2',title:'姓名',width:100,align:'left',halign:'center'},    
	        {field:'column3',title:'姓名全拼',width:100,align:'left',halign:'center'}, 
	        {field:'column4',title:'性别',width:100,align:'center'},    
	        {field:'column5',title:'证件类型',width:150,align:'left',halign:'center'},    
	        {field:'column6',title:'身份证号',width:200,align:'left',halign:'center'},    
	        {field:'column7',title:'出生日期',width:200,align:'center'},    
	        {field:'column8',title:'手机号码',width:100,align:'center'},    
	        {field:'column9',title:'电子邮箱',width:100,align:'left',halign:'center'}    
	    ]],
	    fitColumns:true,
	    toolbar:'#insertbutton',
	    pagination:true,
        pageSize: 20,         //分页大小
        pageList: [10, 20, 30],
        title: '人员素质信息表',
        rownumbers: false,
        nowrap: true,
        autoRowHeight: false,
        striped: false,
        fit: true,
        singleSelect: false,
        

	  
 
   

   });
   
  
   
    $('#update_cardnum').textbox({
       onChange:function(a){
           var card=a.substr(6,4).concat("-",a.substr(10,2),"-",a.substr(12,2));
           var sex=a.substr(16,1);
           if(sex%2==1){
               $('#1').attr('checked',true);
           }else{
               $('#0').attr('checked',true);
           } 
           var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加权因子 
           var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校验码 
           if($('#add_cardType').val()=='居民身份证'){
               //alert('要校验。。。');
               if(/^\d{17}\d|x$/i.test(a)){  
                   var sum = 0, idx; 
                   for(var i = 0; i < a.length - 1; i++){ 
                   // 对前17位数字与权值乘积求和 
                   sum += parseInt(a.substr(i, 1), 10) * arrExp[i]; 
                   } 
                   // 计算模（固定算法） 
                   idx = sum % 11; 
                   // 检验第18为是否与校验码相等 
                   //return arrValid[idx] == value.substr(17, 1).toUpperCase(); 
                   arrValids=arrValid[idx]==a.substr(17, 1).toUpperCase();
                   $.extend($.fn.validatebox.defaults.rules, {    
                       minLength: {    
                           validator: function(arrValids, num){    
                               return arrValids;    
                           },    
                           message: '身份证信息有误，请重新输入.'   
                       }    
                   });  
               }else{
                   return false; 
               } 
           }
           $('input[name=column7]').val(card);
           $('#update_birthday').textbox('setText',card);
           $('#update_birthday').textbox('setValue',card);
       }
   })
   
     $('#update_name').textbox({
        onChange:function(a) {
            var py = Mtils.utils.makePy(a);
            
            $('#update_nameAll').textbox('setText',py);
            $('#update_nameAll').textbox('setValue',py);
        }
    }); 
     
    
   
}
 
 //删除的提交按钮
 $(function () {
     $("#delete_submit").click(function () {
   	 var rows =$('#dg').datagrid('getSelections');
     /* $.messager.alert('提示','是否删除这'+rows.length+'信息'); */
         if(rows.length!=0){
        	 console.log(rows);
         	var id=rows.map(function(x){return x.column1;});
         	
         }else{
        	 
        	 $('#dlg-delete').dialog('close');
         }
       	 $.ajax({
             type: "get",
             url: "/users/delete",
             dataType: "json",
             data: {id: id},
             traditional:true,
             success: function (data) {
            	 if(data==100){
            		 $.messager.alert('提示','删除成功');
      
        	        }else{
        	        	 $.messager.alert('提示','删除成功');
        	        }
             }
         });
       	$('#dlg-delete').dialog('close');
       	window.location.reload();
         
     });
     

      //页面的删除功能
         $("#delete").click(function () {
    	 
         var rows =$('#dg').datagrid('getSelected');
         if(!rows){
        	 $.messager.alert('提示','请先选择一条信息');
        	 $('#dlg-delete').dialog('close');
        	 
         }
         
      

     });
      

     
 });
 

  
 
 var url;
	function newUser(){
		$('#dlg').dialog('open').dialog('setTitle','新增用户');
		$('#form').form('clear');
		url = 'users/login';
	}

	function editUser(){
		var rows = $('#dg').datagrid('getSelections');
		if(rows.length>1){
			$.messager.alert('提示','只能选择一条数据!');
			return
		}
		var row = $('#dg').datagrid('getSelected'); 
		if (row){
			url = 'users/update';
			$('#dlg').dialog('open').dialog('setTitle','编辑用户');
			$('#form').form('load',{
					column1:  row.column1,
					column2:  row.column2,
					column3:  row.column3,
					column4:  row.column4,
					column5:  row.column5,
					column6:  row.column6,
					column7:  row.column7,
					column8:  row.column8,
					column9:  row.column9
			});
		}else{
			$.messager.alert('提示','请选择要编辑的数据!');
		}
	}

	
	
	
	
	function saveUser(){
		var row = $('#dg').datagrid('getSelected');
		$('#form').form('submit',{
			url: url,
			onSubmit: function(){
				return $(this).form('enableValidation').form('validate');
			},
			success: function(result){
				/* $('#dlg').dialog('close');
					$.messager.alert('提示',result);
							// close the dialog
					$('#dg').datagrid('reload');	// reload the user data */
					if(result=="添加成功"){
						$('#dlg').dialog('close');
						$.messager.alert('提示',result);
								// close the dialog
						$('#dg').datagrid('reload');
					}else{
						$.messager.alert('提示',result);
						
						
					}
					
				}
		});
		
	}

到这里就结束了，整个界面以及相关功能也已全部实现