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分 ...
随机推荐
- Tomcat目录下的各个文件夹的作用
1.bin:存放各种不同平台开启与关闭Tomcat的脚本文件. 2.lib:存tomcat与web应用的Jar包 3.conf:存放tomcat的配置文件 4.webapps:web应用的发布目录,包 ...
- ASIHTTPRequest中的DELETE、PUT、GET、POST请求实例-备用
感谢分享 // ASIFormDataRequestTests.m // Part of ASIHTTPRequest -> http://allseeing-i.com/ASIHTTPRe ...
- git新手碰到的各种奇葩问题之一
git 操作错误: <1>.情景描述:当在git commit --amend 更新上一次提交时,而此时提交日志会跳转到别人的日志中.,会出现错误:如下 弥补操作: 1.git fetc ...
- HADOOP之HIVE+MYSQL,HBASE+ZOOKEEPER
这个搞得有劲哈哈 继续...继续....
- 用Altium designer画PCB的一般心得
一.电路版设计的先期工作 1.利用原理图设计工具绘制原理图,并且生成对应的网络表.当然,有些特殊情况下,如电路版比较简单,已经有了网络表等情况下也可以不进行原理图的设计,直接进入PCB设计系统,在PC ...
- BZOJ1662: [Usaco2006 Nov]Round Numbers
1662: [Usaco2006 Nov]Round Numbers Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 147 Solved: 84[Sub ...
- bzoj1148
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1148 很常见的排序贪心题...... 假设我们得到了一个最优序列,记s[n]=w[1]+w[2 ...
- oracle10.2 dblink impd 同库不同用户复制数据
同库不同用户复制数据 1.授权用户导入表权限; SQL> grant exp_full_database to system; SQL> commit; 2.创建dblink; SQL&g ...
- 我的四年建站故事（X）
今天版主们有在群里聊建站的事情了,似乎他们每个人都很热衷于搭建一个自己的网站或者博客,我突然之间觉得非常有必要做一些经验的分享. 首先我想先介绍一下CMS( 网站内容管理系统, 即 Co ...
- Bubble Sort 冒泡排序
//Bubble Sort ( O(n²)) public class TestBubbleSort { public int[] bubbleSortArray(int[] arr){ ; i &l ...