• EasyUI DataGrid使用示例


    <%@ 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",
                     "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',40">资源编号</th>
    			<th data-options="field:'module_name',150">资源名称</th>
    			<th data-options="field:'actions',200,formatter:formatOpAction">操作</th>
    		</tr>
    	</thead>
    </table>
    <input id="ddlRole" class="easyui-combobox" style="200px" />


  • 相关阅读:
    libcurl在mac上编译
    Kafka入门经典教程
    mac kafka 环境搭建 以及PHP的kafka扩展
    Mac下安装php-memcached扩展
    Mac使用brew安装nginx,并解决端口80访问权限问题
    Git的基本使用汇总整理
    MySQL InnoDB 共享表空间和独立表空间
    VB中如何修改treeview的背景色
    转:Python yield 使用浅析
    设置TreeView背景色
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234050.html
Copyright © 2020-2023  润新知