因为用户的功能都在前十篇里 这里 就把下拉列表的功能拿出来
读取数据库字段绑定到界面中
1) JQ界面加载完 访问数据库 读取数据
2）返回数据循环标签 加入DIV中
ejs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="/stylesheets/index.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/user.css" />
<title>Document</title>
</head>
<body>
<div class="sys_contnt">
<div class="sys_content_left">
<ul>
<li><a href="/usermanager" id="groupmanager" target="_self">用户管理</a></li>
<li class="sys_content_left_l1"><a href="/adduser" id="useradd">用户添加</a></li>
</ul>
</div>
<div class="sys_content_right" >
<div class="user_add">
<h1>添加用户</h1>
<div class="con">
<form action="/insertuser" method="post">
<table cellpadding="0" border="0" cellspacing="0" class="d">
<tr>
<td width="20%" class="td_1">用户名：</td>
<td width="80%"><input type="text" name="username" class="text"/></td>
</tr>
<tr>
<td width="20%" class="td_1">工<img src="/images/word.png" alt=""/>号：</td>
<td width="80%"><input type="text" name="usercode" class="text"/></td>
</tr>
<tr>
<td class="td_1">用户组：</td>
<td>
<div id="s1" class="select">
<span>搜索</span>
<ul>
</ul>
<input type="hidden" name="usergroup" id="usergroup"/>
</div>
</td>
</tr>
<tr>
<td class="td_1">机<img src="/images/word.png" alt=""/>构：</td>
<td>
<div id="s2" class="select">
<span>搜索</span>
<ul>
</ul>
<input type="hidden" name="userdepart" id="userdepart"/>
</div>
</td>
</tr>
<tr>
<td class="td_1">密<img src="/images/word.png" alt=""/>码：</td>
<td><input type="password" name="pwd" class="text"/>
<input name="button" type="submit" class="passbut" id="button" value="随机密码" /></td>
</tr>
<tr class="tr_5">
<td class="td_1"><span class="td_t">备<img src="/images/word.png" alt=""/>注：</span></td>
<td class="texta"><textarea rows="8" cols="34" name="description"></textarea></td>
</tr>
<tr>
<td></td>
<td class="td_btn"><input type="submit" class="btn_sub" value="提 交"/></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
<script src="/javascripts/jQuery.js"></script>
<script>
$(document).ready(function(){
$.get("/getallgroup",function(data,err){
console.log(data);
for(var i = 0; i < data.length; i++){
var liNode = $("<li myindex="+ data[i].groupId +">"+ data[i].groupName +"</li>");
$("#s1 ul").append(liNode);
}
})
$.get("/getdepartlist",function(data,result){
for(var i = 0; i < data.length; i++){
var liNode = $("<li myindex="+ data[i].departmentid +">"+ data[i].departmentname +"</li>");
$("#s2 ul").append(liNode);
}
})
})
function select(id){
$(id + " span").click(function(){
$(id + " ul").show(500);
$(id + " ul li").click(function(){
$(id + " span").html($(this).html());
$(id + " input").val($(this).attr("myindex"));
$(id + " ul").hide(500);
});
});
}
$(document).ready(function(){
select("#s1");
select("#s2");
});
</script>
</html>
路由
var express = require('express');
var router = express.Router();
var db = require('../sql_db.js');
/* GET users listing. */
router.get('/adduser', function(req, res, next) {
res.render('user_add.ejs');
});
router.get('/getallgroup',function(req,res,next)
{
db.query('select * from usergroup',function (err,data)
{
if(err)
{
console.log(err);
}else
{
res.send(data);
}
});
});
module.exports = router;主要技能点还是数据交互
当JQ触发界面加载完毕后 用过ajax get方式访问路由 路由查得数据后 res.sender返回数据
get callback 函数 用过Data 来循环追加标签
在通过js处理点击事件~
