EasyUI——实现展示后台数据代码
下面是View显示代码:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml"; } <script type="text/javascript">
$(function () {
var editRow = undefined;
$("#tb1").datagrid({
fitColumns: true,
striped: true,
//这里需要接收【总行数total】和【数据组rows】的【JSON格式】的数据{total:23,rows:[{},{}]}
url: "/UserExpression/GetAllUserInfos",
singleSelect: false,
pagination: true,
rownumbers: true,
pageSize: ,
pageList: [, , ],
columns: [
[// u.Id,u.UName,u.Pwd,u.Remark,u.SubTime
{ title: "用户名", field: "UName", allgn: "center", width: },
{ title: "密码", field: "Pwd", allgn: "center", width: },
{ title: "备注", field: "Remark", allgn: "center", width: },
{ title: "保存时间", field: "SubTime", allgn: "center", width: },
{
title: "编辑", field: "xx", allgn: "center", width: , formatter: function (value, row, index) {
var btn = '<a class=Update>修改</a>|<a class=delete>删除</a>';
return btn;
}
},
]
],
//在数据加载成功的时候触发。
onLoadSuccess: function (data) {
$('.Update').linkbutton({
text: '修改',
iconCls: 'icon-edit',
plain: true,//是否显示边线
onClick: function () {
var zhi = $("#tb1").datagrid("getSelections");
window.location.href = '/HomeText/Edit?id=' + zhi[].productID;
}
})
$('.delete').linkbutton({
text: '删除',
iconCls: 'icon-edit',
plain: true,//是否显示边线
onClick: function () {
var zhi = $("#tb1").datagrid("getSelections");
$.ajax({
type: 'POST',
dataType: 'json',
url: '/HomeText/DeleteConfirmed?id=' + zhi[].productID,
success: function (data) {
$("#tb1").datagrid("reload");
}
})
}
})
},
toolbar: [
{
text: "添加",
iconCls: "icon-add",
handler: function () {
window.open("/HomeText/Create")
}
},
{
text: "删除",
iconCls: "icon-cancel",
}
],
})
})
</script>
<table id="tb1"></table>
下面是Controller后台代码:
using IBLL;
using SQLModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVC展示数据.Controllers
{
public class UserExpressionController : Controller
{
//利用spring.net在Config里面进行配置,这样就不用new对象了
public IUserInfo UserInfoBLL2 { get; set; } #region 加载用户的数据
public ActionResult Index()
{
return View();
} public ActionResult GetAllUserInfos()
{
//根据分页显示数据
int pageSize = Request["rows"] == null ? : int.Parse(Request["rows"]);
int pageIndex = Request["page"] == null ? : int.Parse(Request["page"]); //--------------------------------第几页,每页几条,根据id进行查询
var data = UserInfoBLL2.LoadByPage(pageIndex, pageSize, n => n.Id)
//-----避免重复查询
.Select(u => new { u.Id, u.UName, u.Pwd, u.Remark, u.SubTime }); //总的数据条数
int total = UserInfoBLL2.Load().Count();
var result = new { total=total,rows=data};
return Json(result, JsonRequestBehavior.AllowGet);
}
#endregion
}
}
部分视图展示:
EasyUI——实现展示后台数据代码的更多相关文章
- easyUI + servlet 展示datagrid数据列表
1:在jsp页面添加所用easyUI的js和css 2.前台代码示例: <table id="dgObj" style="width: 100%;height:90 ...
- ECharts展示后台数据
/** * Created by Administrator on 2015/11/10 010. */ var home = function () { //项目预警分析 var getProAla ...
- Jquery EasyUI datagrid后台数据表格生成及分页详解
由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...
- Django模板系统(非常详细)(后台数据如何展示在前台)
前面的章节我们看到如何在视图中返回HTML,但是HTML是硬编码在Python代码中的这会导致几个问题:1,显然,任何页面的改动会牵扯到Python代码的改动网站的设计改动会比Python代码改动更频 ...
- 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh(复习) 4、 SpringData-JPA持久层入门案例(重点) 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用
1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...
- el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除
前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...
- 基于Vue开发的门户网站展示和后台数据管理系统
基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...
- bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
- Echarts 获取后台数据 使用后台数据展示 柱形图
后台数据要以json格式返回 页面:引用echarts.js , 然后data以ajax的数据请求并返回 <%@ page language="java" import=&q ...
随机推荐
- 基于51单片机+DAC0832的信号发生器
最近帮别人设计一个毕业设计,做一个多种信号发生器(四种波形:方波.三角波.锯齿波.梯形波),现在贴上来给大家参考,如果有错误的地方,望指出~ 下面先贴上仿真的电路图(仿真的软件是Protuse,上传一 ...
- Hive beeline update
Hive cli vs beeline The primary difference between the two involves how the clients connect to Hive. ...
- FileOutputFormat
TextOutputFormat<K,V> 默认输出字符串输出格式: SequenceFileOutputFormat<K,V> 序列化文件输出: MultipleOutput ...
- 【Android Demo】通过WebService获取今日天气情况
因为本身是在搞.NET方面的东东,现在在学习Android,所以想实现Android通过WebService接口来获取数据,网上很多例子还有有问题的.参考:Android 通过WebService进行 ...
- linux -- read(), write()
read()函数 2011-03-23 16:28:37| 分类: linux | 标签: |字号大中小 订阅 read函数从打开的设备或文件中读取数据. #include <uni ...
- UVALive 6092 Catching Shade in Flatland --枚举+几何计算
题意:x=[-200,200],y=[-200,200]的平面,一天中太阳从不同角度射到长椅(原点(0,0))上,有一些树(用圆表示),问哪个时刻(分钟为单位)太阳光线与这些圆所交的弦长总和最长.太阳 ...
- java 14-2 正则表达式的案例
1.判断功能 String类的public boolean matches(String regex) 需求: 判断手机号码是否满足要求? 分析: A:键盘录入手机号码 B:定义手机号码的规则 136 ...
- Android使用的Eclipse NDK开发较详细一篇文章
转自: http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html
- iOS math.h数学函数
在实际工作中有些程序不可避免的需要使用数学函数进行计算,比如地图程序的地理坐标到地图坐标的变换.Objective-C做为ANSI C的扩展,使用C标准库头文件<math.h>中定义的数学 ...
- 1976 Queen数列
1976 Queen数列 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 将1到N的整数数列(1 ...