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分 ...
随机推荐
- Builder模式的几个要点
1.Builder模式主要用于“分步骤构建一个复杂的对象”.在这其中“分步骤”是一个稳定的算法,而复杂对象的各个部分则经常变化.2.变化点在哪里,封装哪里——Builder模式主要在于应对“复杂对象各 ...
- IEqualityComparer<T>接口
IEqualityComparer<T>接口的对象的主要作用在于自定义判断两个对象是否相等. 其中最常用的方法: bool Equals(T x, T y); 实现该方法用于比较两个对象是 ...
- Linux Top使用说明
运行top后,按P键就按CPU排序,按M键就按内存排序 P – 以 CPU 占用率大小的顺序排列进程列表 M – 以内存占用率大小的顺序排列进程列表 在系统维护的过程中,随时可能有需要查看 CPU 使 ...
- authbind start tomcat services as user with less that 1024 ports. linux常规用户使用tomcat的80端口
Start tomcat services using authbind this will allow user to start ports less than 1024 we do not ne ...
- poj 2229 Ultra-QuickSort(树状数组求逆序数)
题目链接:http://poj.org/problem?id=2299 题目大意:给定n个数,要求这些数构成的逆序对的个数. 可以采用归并排序,也可以使用树状数组 可以把数一个个插入到树状数组中, 每 ...
- 【HDU1712】ACboy needs your help（分组背包）
将背包九讲往后看了看,学习了一下分组背包.来做几道入门题,试试手. #include <iostream> #include <cstring> #include <cs ...
- git术语解释staging，index，cache
当我在使用git的时候,有三个东西的出现,一度让我非常困扰,就如题所述,staging,index,和cache. 比如,当我阅读git官网提供的电子书<Pro Git>的时候,最初一章里 ...
- select与epoll分析
关于select与epoll的区别,网上的文章已是一大堆.不过别人的终究是别人的,总得自己去理解才更深刻.于是在阅读了大量的文章后,再装模作样的看下源码,写下了自己的一些理解. 在开始之前,要明白li ...
- StoryBoard 加入一个自定义View
1. 建一个 UIView的子类(MyView.h/MyView.m) 2. 建一个 View类型的XIB 3. 把xib的file‘s owner设为MyView 4. 在.h文件里加上 @prop ...
- 深度剖析JDK动态代理机制
摘要 相比于静态代理,动态代理避免了开发人员编写各个繁锁的静态代理类,只需简单地指定一组接口及目标类对象就能动态的获得代理对象. 代理模式 使用代理模式必须要让代理类和目标类实现相同的接口,客户端通过 ...