asp.net mvc4 eui datagrid视图重写分页
效果图
前端代码：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Scripts/eastui/themes/icon.css" rel="stylesheet" />
<link href="~/Scripts/eastui/themes/default/easyui.css" rel="stylesheet" />
<script src="~/Scripts/eastui/jquery.min.js"></script>
<script id="easyui" src="~/Scripts/eastui/jquery.easyui.min.js"></script>
<title>Index</title>
<script type="text/javascript">
@* cc.push('<img src="@Url.Content("~/Home/GetImage/")' + rowData.id + '" style="height:150px;float:left">');*@
@* var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
renderRow: function (target, fields, frozen, rowIndex, rowData) {
var cc = [];
//td
cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
if (!frozen) {
@* cc.push('<img src="@Url.Content("~/Pricture/GetProductImg")' + rowData.id + '" style="width:150px;float:left">');
cc.push('<img src="../Pricture/GetProductImg/' + rowData.id + '" style="width:150px;float:left">');
//alert(rowData.id);
//div
//float: left
cc.push('<td float: left style=margin-left:20px;">');
for (var i = 0; i < fields.length; i++) {
var copts = $(target).datagrid('getColumnOption', fields[i]);
cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
}
cc.push('</td>');
}
cc.push('</td>');
return cc.join('');
}
})*@
var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
render: function (target, container, frozen) {
var data = $.data(target, "datagrid");
var opts = data.options;
var rows = data.data.rows;
var fields = $(target).datagrid("getColumnFields", frozen);
var table = [];
if (frozen) {
if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) {
return;
}
}
var cls = (i % 2 && opts.striped) ? "class=\"datagrid-row datagrid-row-alt\"" : "class=\"datagrid-row\"";
var style = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : "";
var styler = style ? "style=\"" + style + "\"" : "";
var rowId = rows.rowIdPrefix + "-" + (frozen ? 1 : 2) + "-" + i;
for (var i = 0; i < rows.length; i++) {
table.push('<table class="datagrid-btable" cellpadding="0" cellpadding="0" border="0" style="float:left;" ><tbody>')
table.push("<tr id=\"" + rowId + "\" datagrid-row-index=\"" + i + "\" " + cls + ">");
table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));
table.push("</tr>");
table.push('</tbody></table>');
}
$(container).prev().remove();
$(container).html(table.join(""));
},
renderRow: function (target, fields, frozen, rowIndex, rowData) {
var data = $.data(target, "datagrid");
var opts = data.options;
var rows = data.data.rows;
var fields = $(target).datagrid("getColumnFields", frozen);
var cc = [];
cc.push('<td colspan=' + fields.length + ' style="padding:30px 10px;border:0;">');
if (!frozen) {
if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) {
return;
}
cc.push('<img src="../Pricture/GetProductImg/' + rowData.id + '" style="width:150px;height:150px;float:left">');
for (var i = 0; i < fields.length; i++) {
var copts = $(target).datagrid('getColumnOption', fields[i]);
cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
}
cc.push('</td>');
return cc.join('');
}
}
})
$(function () {
$('#a').datagrid({
view: cardview,
url: '../Pricture/sa',//控制器/方法
pagination: true,
height:500,
width:1000,
pageSize:10, //每页记录数
pageNumber: 1, //默认显示第几页
pageList:[10,20,30], //分页记录数数组
//singleSelect: true,
rownumbers: true,
//toolbar: "#toolbar",
idField: 'id',
//frozenColumns: [[
//{ field: 'ck', checkbox: true },
//{ title: '全选', field: 'EmpID', width: 80, sortable: true }
//]],
toolbar: [
{
id: 'btnadd',
text: '添加',
iconCls: 'icon-add',
handler: function () { //添加车位信息方法
$('#divadd').window('open');
},
},
{
id: 'upprct',
text: '请选择图片',
iconCls: 'icon-add',
handler: function () { //添加车位信息方法
var row = $('#a').datagrid('getSelected');
if (row) {
$('#uploadimgdlg').dialog('open').dialog('setTitle', '上传图片');
$('#uploadimgfm').form('load', row);
} else {
$.messager.alert("提示", "请先选择记录.");
}
},
}
],
columns:
[[
{ field: 'name', title: '姓名', width: 100, align: 'center' },
{ field: 'age', title: '年龄', width: 80, align: 'center' },
{ field: 'imgtype', title: '照片格式', width: 80, height: 80, align: 'center' }
]],
})
var p = $('#a').datagrid('getPager');
$(p).pagination({
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
$("#divadd").window({
title: '添加学生信息',
iconCls: 'icon-add',
width: 'auto',
height: 'auto',
top: 100,
modal: true,
shadow: false,
closed: true,
maximizable: false,
minimizable: false,
resizable: false,
draggable: true
});
})
function add() {
$("#add").form("submit", {
url: '/Pricture/add/', //使用参数
onSubmit: function () {
return $(this).form("validate"); //提交前验证
},
success: function (result) {
if (result == "1") {
$.messager.alert("提示", "保存成功")
$('#divadd').window('close');
$('#a').datagrid('load', {})
}
else {
$.messager.alert("提示", "失败");
}
}
});
}
function upload() {
$('#uploadimgfm').form('submit', {
url: '../Pricture/UploadProductImg',
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
if (result == "OK") {
$('#uploadimgdlg').dialog('close');
//$('#a').datagrid('reload')
location.reload()
}
else {
$.messager.alert("提示", result);
}
}
});
}
</script>
</head>
<body>
@Html.ActionLink("sad", "tt")
<div>
<table id="a"></table>
</div>
<div id="divadd">
<form id="add" method="post" novalidate="novalidate">
<table style="width: 22%; height: 81px;">
<tr>
<td class="auto-style1">姓名：</td>
<td>
<input id="Text1" name="name" type="text" /></td>
</tr>
<tr>
<td class="auto-style1">年龄：</td>
<td>
<input id="Text2" name="age" type="text" /></td>
</tr>
<tr>
<td class="auto-style1"> </td>
<td>
<input id="Button1" type="button" value="确定" onclick="add()" /><input id="Button2" type="button" value="取消" /></td>
<td> </td>
</tr>
</table>
</form>
</div>
<div id="uploadimgdlg" class="easyui-dialog" style="width: 400px; height: 300px; padding: 10px 20px"
closed="true" resizable="true" modal="true" buttons="#uploadimgdlg-buttons" align="center">
<div class="ftitle"></div>
<form id="uploadimgfm" method="post" novalidate="novalidate" enctype="multipart/form-data">
<input class="easyui-validatebox" name="id" style="display: none;" />
<div class="fitem">
<label for="img">请选择图片：</label>
<input id="img" name="img" required="true" type="file" />
</div>
<div id="uploadimgdlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="upload()">确定</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
onclick="javascript:$('#uploadimgdlg').dialog('close'); ">关闭</a>
</div>
</form>
</body>
</html>
后台代码：
1 prictureEntities1 db = new prictureEntities1();
2 public ActionResult Index()
3 {
4 return View();
5 }
6
7 public ActionResult sa(string id)
8 {
9 datagrid obj = new datagrid();
10 int pageSize = Convert.ToInt32(Request["rows"]);
11 int pageNum = Convert.ToInt32(Request["page"]);
12 var all = from a in db.students select a;
13 obj.total = all.Count();
14 obj.rows = all.OrderBy(p => p.id).Skip(pageSize * (pageNum - 1)).Take(pageSize);
15 return Json(obj);
16 }
17 //[AcceptVerbs(HttpVerbs.Post)]
18 public ActionResult add(FormCollection form)
19 {
20 int success;
21 students st = new students();
22 st.name = form["name"];
23 st.age =int.Parse(form["age"]);
24 db.students.Add(st);
25 db.SaveChanges();
26 success = 1;
27 return Content(success.ToString());
28 }
29 public ActionResult UploadProductImg(int id, HttpPostedFileBase img)
30 {
31 if (img == null) return Content("Error");
32 var pro =db.students.FirstOrDefault(r => r.id == id);
33 if (pro == null) return Content("Error");
34 pro.img = new byte[img.ContentLength];
35 img.InputStream.Read(pro.img, 0, img.ContentLength);
36 pro.imgtype = img.ContentType;
37 db.SaveChanges();
38 return Content("OK");
39
40
41 }
asp.net mvc4 eui datagrid视图重写分页的更多相关文章
- asp.net mvc4 使用分部视图来刷新数据库
前几天研究SSE,用浏览器做侦听后台数据库数据变化,如果有更新,就即时通过浏览器,使用SSE效果果然OK,侦听数据库有更新时马上会向浏览器通知有新数据,我还在浏览器里放了短音提示,但遇到一个问题,发出 ...
- asp.net mvc4 easyui datagrid 增删改查分页 导出 先上传后导入 NPOI批量导入 导出EXCEL
效果图 数据库代码 create database CardManage use CardManage create table CardManage ( ID ,) primary key, use ...
- asp.net mvc4+mysql做一个简单分页组件（部分视图）
在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...
- ASP.NET MVC4添加区域视图 找到多个与名为“home”的控制器匹配的类型
今天在项目中遇到一个问题,在MVC下想建立一个区域的后台Boss视图,出现了"找到多个与名为“home”的控制器匹配的类型"的问题,希望下面的解决方案能够帮助到大家 这是网站的整体 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（7）-MVC与EasyUI DataGrid
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(7)-MVC与EasyUI DataGrid 没有源码的同学跳到第六讲下载源码再来. 我们需要漂亮的UI, ...
- ASP.NET MVC4 部分视图
ASP.NET MVC4 部分视图 2014-10-24 16:48 by 易code, 2662 阅读, 1 评论, 收藏, 编辑 [部分视图] ASP.NET MVC 里的部分视图,相当于 Web ...
- Asp.Net MVC4.0 官方教程 入门指南之三--添加一个视图
Asp.Net MVC4.0 官方教程 入门指南之三--添加一个视图 在本节中,您需要修改HelloWorldController类,从而使用视图模板文件,干净优雅的封装生成返回到客户端浏览器HTML ...
- Asp.net MVC4高级编程学习笔记-视图学习第一课20171009
首先解释下:本文只是对Asp.net MVC4高级编程这本书学习记录的学习笔记,书本内容感觉挺简单的,但学习容易忘记,因此在边看的同时边作下了笔记,可能其它朋友看的话没有情境和逻辑顺序还请谅解! 一. ...
- asp.net mvc easyui datagrid分页
提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...
随机推荐
- form 和 ngModel
参考 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController https://docs.angularjs.org/api/n ...
- 自制单片机之十三……时钟IC_DS1302
在网上看了很久,发现初学者最有兴趣的就是DS1302时钟电路,也很自然,它是个做出来就让你觉得最实用的电路了,但实际上制做上并不简单,首先你要让你的显示部分(不管是数码管还是LCD)调试通过.然后把D ...
- 文件锁及其实例，底层文件I/O操作，基本文件操作和实例，Linux中文件及文件描述符概述
http://blog.csdn.net/rl529014/article/details/51336161 http://blog.csdn.net/rl529014/article/details ...
- qt实现头像上传功能（写了4个类，朝十晚八的博客，非常好）
想必大家都使用过qt的自定义头像功能吧,那么图1应该不会陌生,本片文章我就是要模拟一个这样的功能,虽然没有这么强大的效果,但是能够满足一定的需求. 图1 qq上传图片 首先在讲解功能之前,我先给出一片 ...
- 【转】Excel快捷键大全
原文网址:http://www.bm8.com.cn/keyboard/excel.asp 显示和使用"Office 助手"注意 若要执行以下操作,"Microsoft ...
- libeXosip2(2-2) -- eXosip2 network API
eXosip2 network API General purpose API. Functions int eXosip_transport_set (osip_message_t *msg, c ...
- 关于overload和override
override 覆盖,表示在子类中一个函数覆盖基类中的同名函数,或者局部的某个函数覆盖了全局的某个同名函数.被覆盖的函数通常不能直接被调用,必须借助一些显式的强制手段. overload 重载,表示 ...
- 又一编辑神器-百度编辑器-Ueditor
(Lionden<hsdlionden@gmail.com> 转载说明) 前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工 ...
- Django之Cookie与Session
一.cookie 1.cookie使用 def cookie(request): print(request.COOKIES) # 获取所有的COOKIES obj = render(request, ...
- web工程调用hadoop集群1.2
本实例代码在lz的资源中有上传,有需要的可以参考(下载后的文件解压后有两个,一个直接导入myeclipse工程,另外的jar放在hadoop的lib下面,只需修改Utils中的ip即可运行该程序): ...