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: 5,
            pageList: [5, 10, 15],
            columns: [
                   [// u.Id,u.UName,u.Pwd,u.Remark,u.SubTime
                     { title: "用户名", field: "UName", allgn: "center", width: 40 },
                     { title: "密码", field: "Pwd", allgn: "center", width: 40 },
                     { title: "备注", field: "Remark", allgn: "center", width: 40 },
                      { title: "保存时间", field: "SubTime", allgn: "center", width: 40 },
                     {
                         title: "编辑", field: "xx", allgn: "center", width: 40, 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[0].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[0].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 ? 5 : int.Parse(Request["rows"]);
            int pageIndex = Request["page"] == null ? 1 : 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
    }
}

部分视图展示:

时间: 2024-11-10 08:16:01

EasyUI实现展示数据代码的相关文章

EasyUI——弹窗展示数据代码

JS代码: $("#editDv").css("display","block"); $("#editDv").dialog({ title: "温馨提示:请在此编辑您的用户信息~", width:500, height: 300, collapsible: true, maximizable: true, buttons: [{ text: '确认修改', iconCls: 'icon-ok', hand

SSH返回json格式数据到easyui grid展示

原文:SSH返回json格式数据到easyui grid展示 源代码下载地址:http://www.zuidaima.com/share/1550463757290496.htm 比较简单的东西里面有一个登录一个返回json数据 一看就明白但是给新手看很好,分享一下.刚知道还能放图...  

.net之工作流工程展示及代码分享(三)数据存储引擎

数据存储引擎是本项目里比较有特色的模块. 第一,使用接口来对应不同的数据库.数据库可以是Oracle.Sqlserver.MogoDB.甚至是XML文件.采用接口进行对应: 1 public interface IWorkflowDB 2 { 3 List<Flow> GetFlows(); 4 bool SaveFlow(Flow flow); 5 bool DeleteFlow(Guid flowId); 6 7 FlowInstance GetFlowInstanceByInstance

Jquery EasyUI datagrid后台数据表格生成及分页详解

由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而且容易上手.今天就把自己在项目中用到的功能做了一个总结.生成数据表格如下所示: 接下来上代码 界面html及js代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/>

EasyUI:datagrid数据汇总

EasyUI:datagrid数据汇总 js代码: var total=0;//全局变量 $(function(){ $('#tablebudgetdata').datagrid({ title:' ', //标题 onLoadSuccess: function (data) {//表单加载完后再加载此方法 sumPrice(data); } }); }); //求总列的sum function sumPrice(data){ var total = 0; var rows = $("#tabl

Windows程序==&gt;&gt;使用ListView控件展示数据

使用ListView控件展示数据 01.ImageList控件 1.了解了解         属性 说明 Images 储存在图像列表中的所有图像 ImageSize 图像列表中图像的大小 Transparent 被视为透明的颜色 ColorDepth 获取图像列表的颜色深度 Images中图像的存放方式与存放在数组中一样,通过Count属性可以获得Images中图像的个数.每个图像都有一个索引值,从0开始,使用Images[索引值],可以定位到一个图像. ImageList控件所包含的图像可以

使用UITableView展示数据

TableView主要用于展示数据,类似于Android中的ListView. 我们可以通过两个方式使用TableView.第一种是直接使用TableView类.第二种是通过UITableViewController类. 第一种方式主要是通过实例化一个UITableView类,然后将类实例添加到主界面,代码如下 这样,一个简单的tableview就创建了,当然这个时候界面中是没有数据的. 运行结果如下: 接下来为TableView添加数据.通过查看UITableView类的头文件可知道,该类有一

利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序 HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据,难免会含有方便操作的 主键ID这列的记录.现在项目需要在easyUI的DataGrid中显示的数据能全部导出Excel,包括DataGrid中的中文标题,其他的统统不 要. 完成该功能所需的工具和环境:Newtonsoft.Json序列化和反序列化类库.easyUI前端UI框架.HttpHandl

(五)EasyUI使用——datagrid数据表格

DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识.它是轻量级的且功能丰富.单元格合并.多列标题.冻结列和页脚只是其中的一小部分功能.具体功能参考API,这里介绍几种创建数据表格的方法 1. 将HTML代码渲染为datagrid样式 <h3>方式一:将静态的HTML代码渲染为datagrid样式</h3> <table class="easyui-data