文档章节

EasyUI DataGrid使用示例

深圳大道
 深圳大道
发布于 2016/12/29 15:33
字数 1126
阅读 71
收藏 1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUIDemo.aspx.cs" Inherits="C_EasyUIDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>EasyUI DataGrid示例</title>
    <!--easyui-->
    <link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/icon.css" />
    <script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.min.js"></script>
    <script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript">
        $(function () {
            var IsCheckFlag = true; 
            $("#tt").datagrid({
                title: "数据分页",
                url: "easyuihandler.ashx?method=query",
                width: "100%",
                height: "628px",
                striped: true,     //交替行换色
                rownumbers: true,  //行号
                pagination: true,  //显示底部分页
                fitColumns: true,//自动适应。先给列随便加个宽度
                toolbar: "#tb",
                checkOnSelect: false, //true,当用户点击行的时候该复选框就会被选中或取消选中。
                selectOnCheck: true, //true,单击复选框将永远选择行。
                onClickRow: function (index, row) {
                    var d_id = row["d_id"];
                    //alert(d_id);
                },
                onClickCell: function (rowIndex, field, value) {
                    //alert(value);
                    IsCheckFlag = false;
                },
                onSelect: function (rowIndex, rowData) {
                    if (!IsCheckFlag) {
                        IsCheckFlag = true;
                        $("#tt").datagrid("unselectRow", rowIndex);
                    }
                },
                onUnselect: function (rowIndex, rowData) {
                    if (!IsCheckFlag) {
                        IsCheckFlag = true;
                        $("#tt").datagrid("selectRow", rowIndex);
                    }
                }
            });

            var p = $('#tt').datagrid('getPager');
            $(p).pagination({
                /*
                    页数文本框前显示的汉字 修改每页默认条数 
                    搜索pageList在jquery.easyui.min.js中修改,
                    分页区下拉分页数量集合和默认每页分页条数
                    striped属性 交替行换色
                */
                beforePageText: '第',
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from}-{to} 条记录,共 {total} 条记录'
            });
        });

        //搜索
        function doSearch() {
            $('#tt').datagrid('load', {
                dname: $('#d_name').val(),
                delse: $('#d_else').val()
            });
        };

        //导出
        function doExport() {
            var models = [];
            var rows = $('#tt').datagrid('getChecked');
            for (var i = 0; i < rows.length; i++) {
                models.push(rows[i].d_id);
            }
            alert(models.join(','));
        }

        //新增
        function doAdd() {
            alert("新增");
        }

        //格式化列数据
        function formatPrice(val, row, index) {
            if (row.d_amount < 1010) {
                return '<span style="color:red;">' + val + '</span>';
            } else {
                return val;
            }
        }

        //自定义操作列
        function formatOper(val, row, index) {
            var str = "";
            str += '<a href="javascript:void(0);" onclick="doEdit(' + row.d_id + ')">修改</a>';
            str += '  ';
            str += '<a href="javascript:void(0);" onclick="doDelete(' + row.d_id + ')">删除</a>';
            return str;
        }
        //编辑
        function doEdit(id) {
            alert(id);
        }
        //删除
        function doDelete(id) {
            alert(id);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table id="tt">
                <thead>
                    <tr>
                        <th field="ck" width="100" align="center" checkbox="true"></th>
                        <th field="d_id" width="100" align="center">编号</th>
                        <th field="d_name" width="100" align="center" sortable="true">用户名</th>
                        <th field="d_password" width="100" align="center" sortable="true">用户密码</th>
                        <th field="d_else" width="100" align="center" sortable="true">备注信息</th>
                        <th field="d_amount" width="100" align="center" sortable="true" formatter="formatPrice">账户余额</th>
                        <th field="_operate" width="100" align="center" formatter="formatOper">操作</th>
                    </tr>
                </thead>
            </table>
        </div>

        <!--查询区域-->
        <div id="tb" style="padding: 3px">
            <span>用户名:</span>
            <input id="d_name" style="line-height: 26px; border: 1px solid #ccc" />
            <span>备注信息:</span>
            <input id="d_else" style="line-height: 26px; border: 1px solid #ccc" />
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSearch()">查询</a> 
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="doAdd()">新增</a> 
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="doExport()">批量删除</a> 
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-export'" onclick="doExport()">导出选中</a>
        </div>
    </form>
</body>
</html>
<%@ WebHandler Language="C#" Class="EasyUIHandler" %>

using System;
using System.Web;
using System.Collections.Generic;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Data;
using System.Data.SqlClient;

public class EasyUIHandler : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        int pageIndex = MSCL.RequestHelper.GetInt("page", 0);  //当前页码
        int pageSize = MSCL.RequestHelper.GetInt("rows", 0);  //每页显示记录数
        string method = MSCL.RequestHelper.GetString("method");//前台传的标示值 

        string JsonStr = string.Empty;
        try
        {
            switch (method)
            {
                //查询数据
                case "query":
                    string dname = MSCL.RequestHelper.GetString("dname");
                    string delse = MSCL.RequestHelper.GetString("delse");

                    string sort = MSCL.RequestHelper.GetString("sort"); //排序字段名。
                    string order = MSCL.RequestHelper.GetString("order"); //排序方式
                    string where = string.Empty;
                    where += string.IsNullOrWhiteSpace(dname) ? "" : " And d_name like '%" + dname + "%' ";
                    where += string.IsNullOrWhiteSpace(delse) ? "" : " And d_else like '%" + delse + "%' ";
                    JsonStr = QueryData(pageIndex, pageSize, where, sort, order);
                    break;
                default:
                    break;
            }
        }
        catch (Exception ex)
        {
            throw;
        }
        context.Response.Write(JsonStr);
        context.Response.End();
    }

    #region 
    /// <summary>
    /// 查询数据
    /// </summary>
    /// <param name="pageIndex">当前页码</param>
    /// <param name="pageSize">每页记录数</param>
    /// <param name="where">查询条件</param>
    /// <param name="orderField">排序字段</param>
    /// <param name="order">排序方式 asc或desc</param>
    /// <returns></returns>
    protected string QueryData(int pageIndex, int pageSize, string where,string orderField,string order)
    {
        int totalRecord = 0;
        int TotalPage = 0;
        string orderStr = string.IsNullOrWhiteSpace(orderField) ? "d_id asc" : string.Format("{0} {1}", orderField, order);
        DataTable dt = MSCL.PagingHelper.QueryPagingMssql("TestTable", "*", orderStr, pageIndex, pageSize, where, out totalRecord, out TotalPage);
        PageData data = new PageData();
        data.total = totalRecord;
        List<JObject> list = new List<JObject>();
        foreach (DataRow item in dt.Rows)
        {
            JObject obj = new JObject();
            obj.Add("d_id", item["d_id"].ToString());
            obj.Add("d_name", item["d_name"].ToString());
            obj.Add("d_password", item["d_password"].ToString());
            obj.Add("d_else", item["d_else"].ToString());
            obj.Add("d_amount", item["d_amount"].ToString());
            list.Add(obj);
        }
        data.rows = list;
        return JsonConvert.SerializeObject(data); 
    }
    #endregion

    public bool IsReusable {
        get {
            return false;
        }
    }

    public class PageData 
    {
        public int total;
        public List<JObject> rows; 
    }

}

$('#ddlFather').combotree('loadData',@Html.Raw(ViewBag.Level));
$("#ddlFather").combotree('setValue','@ViewBag.FatherId');//默认选中
var t = $('#ddlFather').combotree('tree'); // 得到树对象 
var a = t.tree('getSelected').id;  //取值
var b = t.tree('getSelected').text;  //取值


$('#ddlRole').combobox({
	data: @Html.Raw(ViewBag.RoleData),
	valueField:'GroupID',
	textField:'GroupName',
	onChange : function(){
		var value = $(this).combobox('getValue');
		$("#roleId").val(value);
		//console.log(value);
		$.ajax({
			url: '@Url.Action("GetRole", "Home")', 
			data: {"roleId": value },
			type: 'GET',
			timeout: 1000,
			cache: false,
			success: function(data){
				setCheckbox(data)
			} 
		})              
	}
});
var a = $("#ddlRole").combobox('getValue'); //取值
var a = $("#ddlRole").combobox('getText'); //取文字


$("#resourcelist").treegrid({
	title: "权限分配",
	url: '@Url.Action("GetResourceTree", "Home")',
	idField: 'moduleid',
	treeField: 'module_name',
	//rownumbers: true, //行号
	toolbar: '#tb',
	fitColumns: true,//自动适应。先给列随便加个宽度
	border: false
});

<table id="resourcelist">
	<thead>
		<tr>
			<th data-options="field:'moduleid',width:40">资源编号</th>
			<th data-options="field:'module_name',width:150">资源名称</th>
			<th data-options="field:'actions',width:200,formatter:formatOpAction">操作</th>
		</tr>
	</thead>
</table>
<input id="ddlRole" class="easyui-combobox" style="width:200px" />

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/53046429

共有 人打赏支持
深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.1K
3
AngularJS和EasyUI结合使用的注意点

最近在着手用angular重构一个项目,原来的前台是纯easyui做的,最近花了一周学了angular,决定把它们结合下,用纯html 和 暴露后台rest api搞起。结果在ng-view多页切换的时候遇到了一个问题...

Big_BoBo
2013/12/26
0
8
ASP.net+MVC2+EasyUI搭建一个简单表格示例

一个非常基础的小例子,主要是利用VS2010提供的MVC框架,后台是ASP.NET,前台是EasyUI,然后利用EasyUI的datagrid来显示一个表格的数据。 1.首先创建MVC项目。VS2010自带MVC2(虽然已经比较老...

guoliang
2013/10/10
0
0
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
0
3
jquery easyui的datagrid在初始化的时候会请求两次URL?

html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid,这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解决...

五毛钱的饼
2014/09/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 升级中的一些常见问题

升级的时候遇到了问题了吗? 如果你想尝试重新进行升级的话,你需要首先重新恢复老的备份。不要尝试再次对 Confluence 进行升级或者在升级失败后重新启动老的 Confluence。 在升级过程中的一...

honeymoose
今天
2
0
C++随笔(四)Nuget打包

首先把自己编译好的包全部准备到一个文件夹 像这样 接下来新建一个文本文档,后缀名叫.nuspec 填写内容 <?xml version="1.0"?><package xmlns="http://schemas.microsoft.com/packaging/201......

Pulsar-V
今天
2
0
再谈使用开源软件搭建数据分析平台

三年前,我写了这篇博客使用开源软件快速搭建数据分析平台, 当时收到了许多的反馈,有50个点赞和300+的收藏。到现在我还能收到一些关于dataplay2的问题。在过去的三年,开源社区和新技术的发...

naughty
今天
5
0
Python3的日期和时间

python 中处理日期时间数据通常使用datetime和time库 因为这两个库中的一些功能有些重复,所以,首先我们来比较一下这两个库的区别,这可以帮助我们在适当的情况下时候合适的库。 在Python文...

编程老陆
今天
2
0
分布式面试整理

并发和并行 并行是两个任务同时进行,而并发呢,则是一会做一个任务一会又切换做另一个任务。 临界区 临界区用来表示一种公共资源或者说是共享数据,可以被多个线程使用,但是每一次,只能有...

群星纪元
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部