先放狗...先放图,再说话...
先把H+的框架往上一套,看上去还不错(主要是本人头像
)先弄一个增删改查出来再说
)先弄一个增删改查出来再说
文件结构上,我就分了两级,因为用了iframe嵌套,iframe里面的内容页我都放templet里面了,单独调试某个页面也非常方便,当然喜欢根据功能板块分的也行,随个人嗜好.
表格使用的是bootstrap-table插件,主要功能是 分页,局部刷新,导出......
由于不喜欢使用面包屑,页面乱跳,所以我把增删改查功能都放在一个页面,每个页面对应一个js文件
先把怎么玩bootstrap-table的代码copy过来
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$(‘#tb_departments‘).bootstrapTable({
url: RequestListUrl, //请求后台的URL（*）
method: ‘post‘, //请求方式（*）
toolbar: ‘#toolbar‘, //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true
}, {
field: ‘user_name‘,
title: ‘用户名‘
}, {
field: ‘nick_name‘,
title: ‘昵称‘
}, {
field: ‘mobile‘,
title: ‘手机号‘
}, {
field: ‘email‘,
title: ‘邮箱‘
}, ]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
user_name: $("#user_name").val(),
mobile: $("#mobile").val()
};
return temp;
};
return oTableInit;
};
非常的简单,这里吧一些路径提取出来,以后类似页面就可以直接copy了
//请求地址(列表) var RequestListUrl = "/Templet/GetUserList"; //请求地址(单条记录) var RequestUrl = "/Templet/GetUser"; //请求地址(删除记录) var RequestDelUrl = "/Templet/DelUser"; //请求地址(修改) var RequestEditUrl = "EditUser"; //请求控制器(添加) var RequestAddUrl = "AddUser"
然后就是增删改查了,也是很容易,都是$.post提交到控制器
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
$("#btn_add").click(function () {
$("#myModalLabel").text("新增用户");
$("#myModal").find(".form-control").val("");
$(‘#myModal‘).modal()
});
$("#btn_edit").click(function () {
var arrselections = $("#tb_departments").bootstrapTable(‘getSelections‘);
if (arrselections.length > 1) {
var d = dialog({
fixed: true,
content: "只能选择一行进行编辑",
padding: 30
});
d.show();
//关闭提示模态框
setTimeout(function () {
d.close().remove();
}, 2000);
return;
}
if (arrselections.length <= 0) {
var d = dialog({
fixed: true,
content: "请选择有效数据",
padding: 30
});
d.show();
//关闭提示模态框
setTimeout(function () {
d.close().remove();
}, 2000);
return;
}
$("#myModalLabel").text("编辑");
$.post(RequestUrl, { id: arrselections[0].id }, function (data) {
$("#id").val(data.id);
$("#txt_user_name").val(data.user_name);
$("#txt_mobile").val(data.mobile);
$("#txt_email").val(data.email);
$("#txt_nick_name").val(data.nick_name);
$("#txt_password").val(data.password);
$("#txt_passwords").val(data.password);
$("#form0").attr("action", RequestEditUrl);
});
$(‘#myModal‘).modal();
});
$("#btn_delete").click(function () {
var arrselections = $("#tb_departments").bootstrapTable(‘getSelections‘);
if (arrselections.length <= 0) {
var d = dialog({
fixed: true,
content: "请选择有效数据",
padding: 30
});
d.show();
//关闭提示模态框
setTimeout(function () {
d.close().remove();
}, 2000);
return;
}
var d = dialog({
title: ‘系统提示‘,
padding: 30,
content: ‘确定要删除这些数据?‘,
okValue: ‘确定‘,
ok: function () {
this.title(‘提交中…‘);
var ids = "";
$(arrselections).each(function () {
ids += this.id + ",";
})
if (ids.length > 1)//去掉最后一个,
{
ids = ids.substring(0, ids.length - 1);
}
$.post(RequestDelUrl, { ids: ids }, function (data) {
var e = dialog({
padding: 30,
content: data.msg
});
//显示模态框
e.show();
//先关闭主窗体
$(‘#myModal‘).modal(‘hide‘)
//刷新数据
$(‘#tb_departments‘).bootstrapTable(‘refresh‘, { url: RequestListUrl });
//关闭提示模态框
setTimeout(function () {
e.close().remove();
}, 2000);
});
},
cancelValue: ‘取消‘,
cancel: function () { }
});
d.show();
});
$("#btn_query").click(function () {
$("#tb_departments").bootstrapTable(‘refresh‘);
});
};
return oInit;
};
后台就不贴具体实现代码了,浪费位置
[HttpPost] public JsonResult GetUserList(int limit = 10, int offset = 1, string user_name = "", string mobile = "")
继续放狗...
仔细的朋友可能发现这个这个提示比前面的丑一点点,好吧,这是我自定义的,在做这个的时候,我遇到一个大坑,就是post提交表单的时候假设要验证用户名是否存在,如果存在则阻止表单提交,折腾了好久都没搞好,后来使用jquery.unobtrusive-ajax.js,可以在提交表单的时候进行验证,添加成功后刷新表格数据
//刷新数据
$(‘#tb_departments‘).bootstrapTable(‘refresh‘, { url: ‘/Templet/GetUserList‘ });
修改与删除与这类似,这里就不重复说明了.
时间： 2024-08-28 21:06:27