1.首頁index.jsjavascript
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('main', { title: 'Express' }); }); module.exports = router;
2.main.htmlhtml
<script> var url; function openTab(text, url, iconCls) { if ($("#tabs").tabs("exists", text)) { $("#tabs").tabs("select", text); } else { var content = "<iframe frameborder=0 scrolling='yes' style='width:100%;height:100%;' src='" + url + "'></iframe>"; $("#tabs").tabs("add", { title: text, iconCls: iconCls, closable: true, content: content }) } } function loginOut(){ $.messager.confirm('提示', '肯定要退出登陸嗎?', function (r) { if (r) { window.location.href="/out"; } }); } </script> <body class="easyui-layout"> <!--頭部--> <div class="top" region="north"><span class="title">後臺管理系統</span><span class="out">歡迎 豆豆 登陸 <a onclick="loginOut()" href="javascript:void(0)">退出</a></span></div> <!--內容--> <div region="center" style="overflow: hidden" id="center"> <div class="easyui-tabs" fit="true" id="tabs"> <div title="首頁" data-options="iconCls:'icon-home'" id="main"> </div> </div> </div> <!--左側導航--> <div region="west" style="width:200px; overflow-y:auto; overflow-x:auto;;height: 500px" title="導航菜單 " split="true"> <div class="easyui-accordion" data-options="fit:true,border:false"> <div title="測試" data-options="iconCls:'icon-lock'" style="padding:10px"> <a href="javascript:openTab('測試1','/users','icon-page_white_text_width')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-page_white_text_width'">測試1</a><br/> </div> </div> </div> </body>
3.users.jsjava
var express = require('express'); var router = express.Router(); var lottery= require('../modules/lotteryManage.js'); /* GET users listing. */ router.get('/', function(req, res, next) { res.render('users'); }); router.post('/list', function(req, res, next) { var rows = req.body.rows; var page = req.body.page; var phone = req.body.phone; var whereSql= req.body.names; var startTime = req.body.startTime; var endTime = req.body.endTime; lottery.getUserInfo(rows,page,phone,whereSql,startTime,endTime,function(err,result,total){ res.send({total: total, rows: result}); }); }); router.post('/update',function(req,res){ var uid=req.body.id; var unickName=req.body.nickname; var uqq=req.body.qq; var uAddress=req.body.address; lottery.editUserInfo(uid,unickName,uqq,uAddress,function(err,result1){ if(!err){ res.send("true"); }else { console.log(err); res.json("false"); } }); }); router.post('/delete',function(req,res){ var uid=req.body.id; lottery.delUserInfo(uid,function(err,result){ if(!err){ res.send("true"); }else { console.log(err); res.json({suc:false,errMsg:'刪除失敗!'}); } }); }); module.exports = router;
4.users.htmlajax
<script type="text/javascript"> var editIndex = undefined; function delDialog(){ var selectedRows=jQuery("#dg").datagrid('getSelections'); if(selectedRows.length==0){ jQuery.messager.show({title:"提示",msg:"請選擇要刪除的內容!"}); return; } var strIds=[]; for(var i=0;i<selectedRows.length;i++){ strIds.push(selectedRows[i].id); } var ids=strIds.join(","); ids = ids.split(","); if (ids.length>0) { for(var i=0;i<ids.length;i++){ $.ajax({ type: 'POST', url: "/users/delete", data: { id:ids[i]}, success: function (data) { if(data=="false"){ jQuery.messager.alert({title:'提示',msg:result.errMsg}); } jQuery('#dg').datagrid('reload'); // 從新載入當前頁面數據 } }); } } else //若是沒有刪除數據,則提醒用戶 { $.messager.alert('提示信息', '請選擇你要刪除的信息!', 'warning'); } } //保存按鈕,多條數據一塊兒提交 function save() { if (endEditing()) { //獲取更新更改的行的集合 var row = $("#dg").datagrid('getChanges'); //DataGrid的更該行爲不爲0 if (row.length) { for(var i=0;i<row.length;i++){ $.ajax({ type: 'POST', url: "/users/update", data: { id:row[i].id,nickname:row[i].nickname,qq:row[i].qq,address:row[i].address}, success: function (data) { if(data=="false"){ $.messager.alert('提示信息', '保存失敗'); } $('#dg').datagrid('reload'); // 從新載入當前頁面數據 } }); } } else //若是沒有修改數據,則提醒用戶 { $.messager.alert('提示信息', '您尚未修改信息!', 'warning'); } } editIndex = undefined; } //撤銷按鈕 function reject() { row = $('#dg').datagrid('rejectChanges'); editIndex = undefined; } //獲取修改行數 function getChanges() { if (endEditing()) { var rows = $('#dg').datagrid('getChanges'); alert(rows.length + '行被修改!'); } } //單擊事件 function onClickRow(index) { if (editIndex != index) { if (endEditing()) { $('#dg').datagrid('selectRow', index) .datagrid('beginEdit', index); //開始啓用編輯 editIndex = index; //將正在編輯的行號賦值給變量 } else { $('#dg').datagrid('selectRow', editIndex); } } } //結束編輯 function endEditing() { if (editIndex == undefined) { return true } //校驗指定的行,若是有效返回true if ($('#dg').datagrid('validateRow', editIndex)) { $('#dg').datagrid('endEdit', editIndex); //結束編輯 editIndex = undefined; return true; } else { return false; } } </script> <body> <table id="dg" title="測試1" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="/users/list" fit="true" toolbar="#tb" data-options="iconCls: 'icon-edit',onClickRow: onClickRow,pageSize:25,pageList:[10,15,25,50,100]"> <thead> <tr> <th field="cb" checkbox="true" align="center"></th> <th field="id" width="50" align="center" name="id">編號</th> <th field="nickname" width="50" align="center" name="nickname" data-options="editor:'text'" >暱稱</th> <th field="phone" width="80" align="center" name="phone">聯繫方式</th> <th field="qq" width="50" align="center" name="qq" data-options="editor:'numberbox'">QQ</th> <th field="address" width="150" align="center" name="address" data-options="editor:'text'">地址</th> <th field="createTime" width="100" align="center">中獎時間</th> <th field="level" width="50" align="center" >獎品等級</th> <th field="jpname" width="100" align="center">獎品名稱</th> </tr> </thead> </table> <div id="tb" style="height: auto"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-delete',plain:true" onclick="delDialog()">批量刪除</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="save()">保存批量修改</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤銷</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">獲取修改行</a> </div> </body>