一、创建MVC项目

二、引入EasyUI

1.进入easyui官网下载源码

2. 将上述源码中需要的jquery 有选择的加到项目中来

添加Content文件夹,放入easyui代码

三、添加EF, 采用CodeFrist生成数据库表

1. 通过nugut 引入EF

2.  添加实体

 public class Student
{
public int Id { get; set; }
/// <summary>
/// 学号
/// </summary>
public int StuNo { get; set; }
/// <summary>
/// 姓名
/// </summary>
public string Name { get; set; }
/// <summary>
/// 密码
/// </summary>
public string Pwd { get; set; }
/// <summary>
/// 性别
/// </summary>
public string Sex { get; set; }
/// <summary>
/// 出生日期
/// </summary>
public DateTime? BrithDate { get; set; }
/// <summary>
/// 家庭地址
/// </summary>
public string Address { get; set; }
}

3.创建dbcontext

  public class EFDbContext : DbContext
{
public EFDbContext() : base("name=DbConn")
{
Database.SetInitializer<EFDbContext>(new DropCreateDatabaseIfModelChanges<EFDbContext>());
}

public DbSet<Student> Student { get; set; }
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
modelBuilder.Entity<Student>().HasIndex(s=>s.StuNo).IsUnique();//添加唯一性约束
modelBuilder.Entity<Student>().Property(s=>s.Name).HasMaxLength().IsUnicode();//
modelBuilder.Entity<Student>().Property(s => s.Address).HasMaxLength().IsUnicode();
modelBuilder.Entity<Student>().Property(s => s.Sex).HasMaxLength().IsUnicode();
modelBuilder.Entity<Student>().Property(s => s.Pwd).HasMaxLength();//
}
}

4. 在webconfig中添加链接字符串

<connectionStrings>
<add name="DbConn" connectionString="Data Source=localhost;Initial Catalog=StudentDemo;User ID=test;Password=123456" providerName="System.Data.SqlClient" />
</connectionStrings>

四,生成数据库结构,并添加一些数据

创建StudentController、 及Index视图, 在Index上按F5运行

    public class StudentController : Controller
{
// GET: Student
public ActionResult Index()
{
DataInit(); }
public ActionResult Login()
{ return View();
} private void DataInit()
{
for (int i = ; i <= ; i++)
{
Student student = new Student();
student.Name = "张三" + i;
student.Pwd = "";
student.Sex = "男";
student.StuNo = i;
student.BrithDate = DateTime.Now;
student.Address = "武汉江夏";
EFDbContext dbContext = new EFDbContext();
dbContext.Student.Add(student);
dbContext.SaveChanges(); }
}
}

五、创建 EasyUI 布局页以及 导航目录

根据easyui官方文档说明,编写index 布局页面

@Model
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Content/EasyUI-1.7.0/jquery.min.js"></script>
<script src="~/Content/EasyUI-1.7.0/jquery.easyui.min.js"></script>
<script src="~/Content/EasyUI-1.7.0/easyui-lang-zh_CN.js"></script>
<link href="~/Content/EasyUI-1.7.0/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/EasyUI-1.7.0/themes/icon.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
//tabs的点击事件
bindTabsEvent();
});
function bindTabsEvent() {
$(".detail").click(function () {
//拿到点击标题
var title = $(this).text();
//拿到点击的url
var url = $(this).attr("url");
//判断标签是否存在
var isExt = $("#tt").tabs("exists", title);
//如果存在则选中
if (isExt) {
$("#tt").tabs("select", title); //选中
return;
}
//不存在就添加标签
$("#tt").tabs("add", {
title: title,
content: createTabContent(url),
closable:true
});
});
}
function createTabContent(url) {
return '<iframe src="' + url + '" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>';
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height: 50px;">
<table style="padding: 5px" width="100%">
<tr>
<td valign="bottom" align="left" width="50%">
<font size="4"> 学生演示系统
</td>
<td valign="bottom" align="right" width="50%">
<font size="3"> <strong>欢迎:</strong>@Model.Name</font> <a href="~/Student/LogOut">登出</a>
</td>
</tr>
</table> </div> <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:0px;">
<div class="easyui-accordion" style="width:auto;height:auto;"> <div title="学生管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
<a href="javascript:void(0)" class="detail" url="/Student/StudentTab">学生管理</a>
</div> @*<div title="评论管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
<a href="javascript:void(0)" class="detail" url="/Student/Login">学生登录</a>
</div>*@ </div> </div>
@*<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>*@
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'">
<div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt">
<div title="欢迎使用">
<h1 style="font-size: 24px;">欢迎!</h1>
<h1 style="font-size: 24px; color:red;"> Welcome !</h1>
</div> </div> </div>
</body>
</html>

六、编写 datagrid列表以及增删改查的后端访问接口数据 以及 前端页面代码

后台

        // GET: Student
public ActionResult Index()
{
// DataInit(); int userId;
if( Session["userId"]==null || !int.TryParse(Session["userId"].ToString(),out userId))
{
return Redirect("~/Student/Login");
} EFDbContext dbContext = new EFDbContext();
var user = dbContext.Student.Find(userId);
return View(user);
}
private void DataInit()
{
for (int i = ; i <= ; i++)
{
Student student = new Student();
student.Name = "张三" + i;
student.Pwd = "";
student.Sex = "男";
student.StuNo = i;
student.BrithDate = DateTime.Now;
student.Address = "武汉江夏";
EFDbContext dbContext = new EFDbContext();
dbContext.Student.Add(student);
dbContext.SaveChanges(); }
} public ActionResult StudentTab()
{
return View();
}
public JsonResult StudentList()
{
//要求返回的数据json对象 {total:200,rows:[{},{}]}
int pageSize = int.Parse(Request["rows"] ?? "");
int pageIndex = int.Parse(Request["page"] ?? "");
EFDbContext dbContext = new EFDbContext();
//分页数据
List<Student> studentList= dbContext.Student.OrderBy(s=>s.Id).Skip(pageSize*(pageIndex-)).Take(pageSize).ToList();
//总共多少数据
var allCount = dbContext.Student.Count();
//把totle和rows:[{},{}]一起返回
//先建立一个匿名类
var dataJson = new { total = allCount, rows = studentList };
var json = Json(dataJson, JsonRequestBehavior.AllowGet);
return json;
} public ActionResult AddStudent(Student data)
{
EFDbContext dbContext = new EFDbContext();
if (dbContext.Student.Where(m => m.StuNo == data.StuNo).FirstOrDefault() != null)
{
return Content("error:学号已存在,请修改后再操作!");
}
dbContext.Student.Add(data);
dbContext.SaveChanges();
return Content("ok:新增成功");
}
public ActionResult UpdateStudent(Student data)
{
EFDbContext dbContext = new EFDbContext(); var s = dbContext.Student.Find(data.Id); if (data.StuNo != s.StuNo && dbContext.Student.Where(m=>m.StuNo==data.StuNo).FirstOrDefault()!=null)
{
return Content("error:学号已存在,请修改后再操作!");
} s.Name = data.Name;
s.Pwd = data.Pwd;
s.Sex = data.Sex;
s.StuNo = data.StuNo;
s.BrithDate = data.BrithDate;
dbContext.SaveChanges();
return Content("ok:修改成功");
} public ActionResult DeleteStudent(int id)
{
EFDbContext dbContext = new EFDbContext();
var s = dbContext.Student.Find(id);
dbContext.Student.Remove(s); dbContext.SaveChanges();
return Content("ok:删除成功");
} }

前端

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>StudentList</title>
<script src="~/Content/EasyUI-1.7.0/jquery.min.js"></script>
<script src="~/Content/EasyUI-1.7.0/jquery.easyui.min.js"></script>
<script src="~/Content/EasyUI-1.7.0/easyui-lang-zh_CN.js"></script>
<link href="~/Content/EasyUI-1.7.0/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/EasyUI-1.7.0/themes/icon.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
//初始化表格
initTable();
//设置详细框为不可见
$("#detailDiv").css("display", "none");
//设置添加编辑框为不可见
$("#addDiv").css("display","none");
//设置输入框为禁用
// $("#Id").textbox('textbox').attr('readonly', true);
// $("#Name").textbox('textbox').attr('readonly', true);
// $("#BrithDate").textbox('textbox').attr('readonly', true); }); //初始化表格
function initTable() {
$("#tt").datagrid({
//指向一个地址,当表格加载完成后自动请求该地址
//自动向后台发送 rows 当前页多少条数据 page:当前页
//要求返回的数据json对象 {total:200,rows:[{},{}]}
url: '/Student/StudentList',
title: "学生管理",
fitColumns: true,
height: $(window).height()-10,
idField: 'Id', //后台返回数据中的主键列。一定注意大小写。
loadMsg: "正在加载学生信息........",
pagination: true, //启用分页
singleSelect: true, //只允许选中一行
pageSize: 10, //一页默认多少条
pageNumber: 1, //默认页
rownumbers: true,//行号
pageList: [10, 20, 30], //允许一页多少条数据
queryParams: {}, //异步请求可以额外传递的数据
columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 10 }, // 设置cheakbox formatter: ChangeDateFormat
{ field: 'Id', title: '序号', width: 20 },
{ field: 'StuNo', title: '学号', width: 20 },
{ field: 'Name', title: '姓名', width: 20 },
{ field: 'Pwd', title: '密码', width: 20 },
{ field: 'Sex', title: '性别', width: 20 },
{ field: 'BrithDate', title: '出生日期', width: 30, formatter: ChangeDateFormat },
{ field: 'Address', title: '家庭地址', width: 20 },
{
field: 'operate', title: '操作', align: 'center', width: 30,
formatter: function (value, row, index) {
var str = "";
str += '<a href="#" name="update" id="update" class="easyui-linkbutton" onclick="updateStudent(' + row.Id + ')" ></a>';
str += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
str += '<a href="#" name="delete" id="delete" class="easyui-linkbutton" onclick="deleteStudent(' + row.Id + ')" ></a>';
return str;
}
} ]], onLoadSuccess: function (data) {
$("a[name='update']").linkbutton({ text: '编辑', plain: true, iconCls: 'icon-edit' });
$("a[name='delete']").linkbutton({ text: '删除', plain: true, iconCls: 'icon-cancel' }); }, toolbar: [{
id: 'btnAdd',
text: '添加',
iconCls: 'icon-add',
handler: function () {
addBtnClick(); //添加学生
}
}],
});
}
function ChangeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
} function ChangeDateFormat2(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return month + "/" + currentDate + "/" + date.getFullYear();
}
//添加学生确定按钮
function addBtnClick() {
$("#addDiv").css("display", "block");
$("#id_show_not").css("display", "none");
$("#addDiv").dialog({
title: "添加学生",
modal: true,
width: 350,
height: 320,
open:function(){
},
buttons: [{
text: "确定",
iconCls: "icon-ok",
handler: function () { if ($("#stuNo").val().length == 0) {
$.messager.alert("字段提示", "学号不能为空", "info");
return;
}
if ($("#name").val().length == 0) {
$.messager.alert("字段提示", "姓名不能为空", "info");
return;
}
if ($("#pwd").val().length == 0) {
$.messager.alert("字段提示", "密码不能为空", "info");
return;
} if ($("#brithDate").val().length == 0) {
$.messager.alert("字段提示", "出生日期不能为空", "info");
return;
} var postData = {
stuNO : $("#stuNo").val(),
name : $("#name").val(),
pwd :$("#pwd").val(),
sex: $('input[name="sex"]:checked').val(),
brithDate:$("#brithDate").val(),
address: $("#address").val()
} $.post("/Student/AddStudent", { data: postData }, function (data) {
var serverData = data.split(':');
if (serverData[0] == "ok") {
$.messager.alert("提示", "新增成功", "info");
$("#addDiv").dialog("close"); //关闭窗口
$('#tt').datagrid('reload'); //刷新单表
}
else if (serverData[0] == "error") {
$.messager.alert("提示", serverData[1], "info");
$("#addDiv").dialog("close"); //关闭窗口
$('#tt').datagrid('reload'); //刷新单表
}
else {
$.messager.alert("提示", "新增失败", "info");
$("#addDiv").dialog("close"); //关闭窗口
$('#tt').datagrid('reload'); //刷新单表
}
}); }
}, {
text: "取消",
iconCls: "icon-cancel",
handler: function () {
$("#addDiv").dialog("close");
}
}]
});
} //修改学生确定按钮
function updateStudent(index) {
var row = $('#tt').datagrid('getSelected');
$("#id").textbox("setValue", row.Id);
$("#stuNo").textbox("setValue", row.StuNo);
$("#name").textbox("setValue", row.Name);
$("#pwd").textbox("setValue", row.Pwd);
$(":radio[name='sex'][value='" + row.Sex + "']").prop("checked", "checked");
$("#brithDate").datebox("setValue", ChangeDateFormat2(row.BrithDate));
$("#address").textbox("setValue", row.Address); var a= $("#id").val();
$("#addDiv").css("display", "block");
$("#id_show_not").css("display", "none");
$("#addDiv").dialog({
title: "修改学生",
modal: true,
width: 350,
height: 320,
open: function () { }, buttons: [{
text: "确定",
iconCls: "icon-ok",
handler: function () {
if ($("#stuNo").val().length == 0) {
$.messager.alert("字段提示", "学号不能为空", "info");
return;
}
if ($("#name").val().length == 0) {
$.messager.alert("字段提示", "姓名不能为空", "info");
return;
}
if ($("#pwd").val().length == 0) {
$.messager.alert("字段提示", "密码不能为空", "info");
return;
} if ($("#brithDate").val().length == 0) {
$.messager.alert("字段提示", "出生日期不能为空", "info");
return;
} var postData = {
id:$("#id").val(),
stuNO: $("#stuNo").val(),
name: $("#name").val(),
pwd: $("#pwd").val(),
sex: $('input[name="sex"]:checked').val(),
brithDate: $("#brithDate").val(),
address: $("#address").val()
} $.post("/Student/UpdateStudent", { data: postData }, function (dataaa) { var serverData = dataaa.split(':'); if (serverData[0] == "ok") {
$.messager.alert("提示", "修改成功", "info");
$("#addDiv").dialog("close"); //关闭窗口
$('#tt').datagrid('reload'); //刷新单表
}
else if (serverData[0] == "error") {
$.messager.alert("提示", serverData[1], "info");
$("#addDiv").dialog("close"); //关闭窗口
$('#tt').datagrid('reload'); //刷新单表
}
else {
$.messager.alert("提示", "修改失败", "info");
$("#addDiv").dialog("close"); //关闭窗口
$('#tt').datagrid('reload'); //刷新单表
}
});
}
}, {
text: "取消",
iconCls: "icon-cancel",
handler: function () {
$("#addDiv").dialog("close");
}
}]
});
} //删除学生
function deleteStudent(index) {
$.messager.confirm("提示", "确定要删除吗?", function (r) {
if (r) {
$.post("/Student/DeleteStudent", { id: index }, function (data) {
if (data.substring(0, 2) == "ok") {
//刷新表格
$('#tt').datagrid('reload');
$.messager.alert("提示", "删除成功", "info");
}
else {
$.messager.alert("提示","删除失败","info");
}
});
}
});
}
</script>
</head>
<body> <div>
<table id="tt"></table>
</div>
<!---------------------添加和编辑域开始-------------------------->
<div id="addDiv">
<form id="addForm">
<table>
<tr id="id_show_not">
<td>Id:</td>
<td><input class="easyui-textbox" style="width:250px;height:32px" id="id" name="id" /></td>
</tr>
<tr>
<td>学号:</td>
<td><input class="easyui-textbox" style="width: 250px; height: 32px" id="stuNo" name="stuNo" /></td>
</tr>
<tr>
<td>姓名:</td>
<td><input class="easyui-textbox" style="width: 250px; height: 32px" id="name" name="name" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input class="easyui-textbox" style="width: 250px; height: 32px" id="pwd" name="pwd" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" class="sex" name="sex" value="男" checked="checked" />男
<input type="radio" class="sex" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input class="easyui-datebox " style=" width:250px; height :32px ;" id="brithDate" name="brithDate" data-option="required:true,showSeconds:false" /></td>
</tr>
<tr>
<td>家庭地址:</td>
<td><input class="easyui-textbox" style="width: 250px; height: 32px" id="address" name="address" /></td>
</tr> </table>
</form>
</div>
<!---------------------添加和编辑域结束-------------------------->
</body>
</html>

七、添加页面登录登出接口数据 以及前端页面代码

后端

        public ActionResult Login()
{ return View();
} /// <summary>
/// 生成验证码
/// </summary>
/// <returns></returns>
public ActionResult ValidateCode()
{
ValidateCode validateCode = new ValidateCode();
string code = validateCode.CreateValidateCode();//生成的验证码4个长度
Session["validateCode"] = code;
byte[] buffer = validateCode.CreateValidateGraphic(code);//创建验证码图片
return File(buffer, "image/jpeg");//返回图片
}
public ActionResult CheckLogin()
{
//拿到session的值
string Vcode = Session["validateCode"].ToString();
string requestCode = Request["txtVcode"].ToString();
string userName = Request["txtName"].ToString();
string userPwd = Request["txtPwd"].ToString();
if (!requestCode.Equals(Vcode, StringComparison.CurrentCultureIgnoreCase))
{
return Content("no:验证码错误!!");
} EFDbContext dbContext = new EFDbContext();
var student = dbContext.Student.Where(s => s.Name == userName && s.Pwd == userPwd).FirstOrDefault(); if (student!= null)
{
//清空validateCode
Session["validateCode"] = null;
Session["userId"] = student.Id;
return Content("ok:登录成功");
}
else
{
return Content("no:用户名或者密码错误");
}
} public ActionResult LogOut()
{
Session["userId"] = null;
return Redirect("~/Student/Login");
}
}

前台

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>登录</title>
<script src="~/Content/EasyUI-1.7.0/jquery.min.js"></script>
<script src="~/Content/EasyUI-1.7.0/jquery.easyui.min.js"></script>
<script src="~/Content/EasyUI-1.7.0/easyui-lang-zh_CN.js"></script>
<link href="~/Content/EasyUI-1.7.0/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/EasyUI-1.7.0/themes/icon.css" rel="stylesheet" />
<script type="text/javascript">
$(function () { initWin(); //初始化登录窗体
changeCheckCode(); //切换验证码
cheakLogin(); //验证登录
});
//验证登录
function cheakLogin() {
$("#btnOk").click(function () { if ($("#txtName").val() == "") {
$("#spanName").text("必填");
}
else {
$("#spanName").text("");
}
if ($("#txtPwd").val() == "") {
$("#spanPwd").text("必填");
}
else {
$("#spanPwd").text("");
}
if ($("#txtVcode").val() == "") {
$("#spanVcode").text("必填");
}
else {
$("#spanVcode").text("");
}
if ($("#txtName").val() != "" && $("#txtPwd").val() != "" && $("#txtVcode").val() != "") {
//先把表单序列化为json对象
var jsonForm = $("#loginForm").serializeArray();
//把数据异步提交到后台
$.ajax({
type: "post",
url: "/Student/CheckLogin",
data: jsonForm,
success: function (data) {
var serverData = data.split(':');
if (serverData[0] == "ok") {
window.location.href = "/Student/Index";
}
else if (serverData[0] == "no") {
$("#spanCheak").text(serverData[1]); }
else {
$("#spanCheak").text("异常错误"); }
} });
}
});
}
//初始化登录窗体
function initWin() {
$("#win").window({
title: "登录",
width: 400,
height: 300,
collapsible: false,
minimizable: false,
maximizable: false,
closable: false,
modal: true,
resizable: false,
}); }
//切换验证码
function changeCheckCode() {
$("#changeVcode").click(function () {
$("#image").attr("src", $("#image").attr("src") + 1);
});
}
</script>
</head>
<body> <div id="win" class="easyui-window">
<div>
<div style="height:20px"></div>
<form id="loginForm"> <table>
<tr>
<td style="width:20px"></td>
<td>用户名:</td>
<td><input type="text" class="easyui-textbox" id="txtName" name="txtName" /></td>
<td><span id="spanName" style="color:red"></span></td>
</tr>
<tr style="height:10px"></tr> <tr>
<td style="width:20px"></td>
<td>密 码:</td>
<td><input type="password" class="easyui-textbox" id="txtPwd" name="txtPwd"></td>
<td><span id="spanPwd" style="color:red"></span></td>
</tr>
<tr style="height:10px"></tr>
<tr>
<td style="width:20px"></td>
<td>验证码:</td>
<td><input type="text" class="easyui-textbox" id="txtVcode" name="txtVcode" /></td>
<td><span id="spanVcode" style="color:red"></span></td>
</tr> <tr style="height:10px"></tr> <tr>
<td style="width:20px"></td>
<td><img id="image" src="/Student/ValidateCode/?id=1" style="float: left; height: 24px;" /></td>
<td><a href="javascript:void(0)" id="changeVcode">看不清,换一张</a></td>
</tr> </table>
</form>
</div>
<div style="height:10px"></div>
<div data-options="region:'south',border:false" style="text-align:center;padding:5px 0 0;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" id="btnOk" style="width:80px">登录</a>
<span id="spanCheak" style="color:red"></span>
</div> </body>
</html>

八、页面效果展示

MVC5+EasyUI+EF6增删改查的演示的更多相关文章

  1. golang学习之beego框架配合easyui实现增删改查及图片上传

    golang学习之beego框架配合easyui实现增删改查及图片上传 demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DO ...

  2. MVC与EasyUI结合增删改查

    构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查   在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的 ...

  3. abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查

    系列目录 文章于2016-12-17日重写 在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下. 这讲主要是,制作漂亮的工具栏,虽 ...

  5. Node.js、express、mongodb 入门(基于easyui datagrid增删改查)

    前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...

  6. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  7. easyui datagrid 增删改查示例

    查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...

  8. easyui实现增删改查

    陈旧的开发模式 美工(ui工程师:出一个项目模型) java工程师:将原有的html转成jsp,动态展示数据 缺点: 客户需要调节前端的展示效果 解决:由美工去重新排版,重新选色. 前后端分离: 前端 ...

  9. asp.net mvc4 easyui datagrid 增删改查分页 导出 先上传后导入 NPOI批量导入 导出EXCEL

    效果图 数据库代码 create database CardManage use CardManage create table CardManage ( ID ,) primary key, use ...

随机推荐

  1. 如何设置mysql远程访问

    如何设置mysql远程访问 Mysql默认是不可以通过远程机器访问的,通过下面的配置可以开启远程访问 在MySQL Server端: 执行mysql 命令进入mysql 命令模式, mysql> ...

  2. # Unity 游戏框架搭建 2019 (十六、十七) localPosition 简化与Transform 重置

    在上一篇我们收集了一个 屏幕分辨率检测的一个小工具.今天呢再往下接着探索. 问题 我们今天在接着探索.不管是写 UI 还是写 GamePlay,多多少少都需要操作 Transform. 而在笔者刚接触 ...

  3. jmeter参数化之函数助手(十五)

    jmeter-参数化: 参数化的作用:调用接口入参时.有时要求参数经常变化,如果每次去修改就会变得很繁琐,这时候就需要把经常变化的值改变为提前编辑好的文档或函数中,便于调用时使用不同的值. Jmete ...

  4. 通过ISAPI http协议控制海康摄像头

    一直用海康的SDK进行摄像头控制,但有时候非常不灵活,必须有X86的主机,在嵌入式上面就不行,通过写一个HTTPCLIENT可以通过ISAPI来控制海康的摄像头. 代码如下:git@github.co ...

  5. ES6全面讲解

    写在之前.讲解了比较常用的ES6知识点,可以快速的入门.有两个比较复杂的知识点(promise,generator)则是留在了其他文章中,在里面详细讲解. 介绍 1.历史 ​ 1.ECMAScript ...

  6. Conda安装包错误-CondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://conda.anaconda.org/r/win-64/repodata.json> Elapsed:

    可能是防火墙问题:conda config --set ssl_verify false 安装 openssl . 换源: cmd输入conda config --add channels r 进入C ...

  7. [POJ1835]宇航员<模拟>

    链接:http://poj.org/problem?id=1835 题干太长我就不放描述了. 一道大模拟 看着就脑壳疼. 难点可能在于方向的确认上 要明确当前的头朝向和脸朝向,才能进行处理 一个小小坑 ...

  8. Ali_Cloud++:阿里云-单机版 solr4.10.3 安装部署

    本次案例演示:环境 1.solr-4.10.3.tgz.tgz 2.apache-tomcat-7.0.88.tar.gz 3.IKAnalyzer2012FF_hf1.zip 资源下载:Downlo ...

  9. Activiti7新的API介绍

    一.Activiti7 的组成部分 Activiti Core 作为Activiti 的核心部分,Activiti Cloud 主要是利用云服务来实现分布式业务流程开发. 二.Activiti 新的 ...

  10. js中常见的数据加密与解密的方法

    加密在我们前端的开发中也是经常遇见的.本文只把我们常用的加密方法进行总结.不去纠结加密的具体实现方式(密码学,太庞大了). 常见的加密方式 常见的加密算法基本分为这几类, 线性散列算法(签名算法)MD ...