zoukankan      html  css  js  c++  java
  • EasyUI

    效果:

    html代码:

    • 使用css加载的方式,所以要在写html代码,也可以使用js操作。
    <div>
            <!--使用JS加载方式-->
            <table id="tab"></table>
    
            <!--按钮--->
            <div id="tb">
                <div style ="padding:5px;">
                    <a id ="add" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add',">添加</a>
                    <a id ="edit" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit',">修改</a>
                    <a id ="remove" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove',">删除</a>
                </div>
                <div style ="padding-left:10px;padding-bottom:10px;">
                    搜索姓名(可以模糊查询):<input id ="name" name ="name" type ="text" class="textbox" style ="130px;" />
                    查询时间 从:<input id ="time_from" name ="time_from" type ="text" class ="easyui-datebox"  style ="130px;"/>
                    到:<input id ="time_to" name ="time_to" type ="text" class ="easyui-datebox"  style ="130px;"/>
                    <a id ="search" href ="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'," style ="margin-left:20px; padding:0 10px 0 10px;">搜索</a>
                </div>
            </div>
        </div>

    JS代码:

    • toolbar使用css加载。其余看代码,看注释。
    $(function () {
    
            //格式化日期输出样式
            $('#time_from, #time_to').datebox({
                formatter: function (date) { return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(); },
            });
    
            //Datagrid设置
            $('#tab').datagrid({
    
                //===================================== 样式 ===============================================//
                 800,//宽度
                title: '信息列表',//标题名
                iconCls: 'icon-search',//图标
                singleSelect: true,//是否单选
                striped: true,//是否开启斑马线
                fitColumns: false,//是否自适应宽度(出现滚动条)
                loadMsg: '正在努力加载,请稍后………………',//显示加载提示信息
                rownumbers: true,//显示行号
                //showHeader: false,//是否显示行头(标题)
                //showFooter:false,//显示行尾,默认情况下不显示,要在后台使用json数据传递
                //==========================================================================================//
    
    
                //============================= 加载数据,要显示的字段 =========================================//
                //要加载的数据
                url: "../Json/datagridjson.ashx",
                //要显示的列
                columns: [[
                    {
                        field: 'id',
                        title: '编号',
                        align: 'center',//标题和内容居中
                        resizable: false,//不允许改变大小
                        //hidden:true,//隐藏该列
                         100,//所有字段设置成100,起到自动平均分配大小的作用
                    },
                    {
                        field: 'name',
                        title: '姓名',
                         100,//所有字段设置成100,起到自动平均分配大小的作用
                        halign: 'center',//仅标题居中
    
                        //显示数据的时候,格式化数据
                        formatter: function (value, row, index) {
                            return '[ ' + value + ' ]';
                        },
                    },
                    {
                        field: 'sex',
                        title: '性别',
                         100,//所有字段设置成100,起到自动平均分配大小的作用
                    },
                    //在字段中使用排序,每点击一次,都会向后台POST要排序的字段和正序还是倒序排列。
                    {
                        field: 'createtime',
                        title: '创建时间',
                        400,//所有字段设置成100,起到自动平均分配大小的作用
                        sortable: true,//允许排序
                    }
                ]],
                //==========================================================================================//
    
    
                //===================================== 分页 ===============================================//
                //显示分页控件栏
                pagination: true,
                pageNumber: 1,//初始化的时候在第几页
                pageSize: 10,//,每页显示的条数
                pageList: [10, 15, 20],//每页显示的条数
                //==========================================================================================//
    
    
                //===================================== 排序 ===============================================//
                //通过POST传递到后台,然后进行排序。
                sortName: 'createtime',
                sortOrder: 'desc',
                //==========================================================================================//
    
    
                //===================================== 按钮 ===============================================//
                toolbar: '#tb',
                //==========================================================================================//
    
    
            });
    
                
            //添加
            $('#add').click(function () {
                alert('添加按钮');
            });
    
            //修改
            $('#edit').click(function () {
                alert('编辑按钮');
            });
    
            //删除
            $('#remove').click(function () {
                alert('删除按钮');
            });
    
            //查询
            $('#search').click(function () {
                $('#tab').datagrid('load', {
                    searchvalue: $.trim($('input[name="name"]').val()),
                    time_from: $.trim($('input[name="time_from"]').val()),
                    time_to: $.trim($('input[name="time_to"]').val()),
                });
            });
    
        })

    后台一般处理程序接收:

    • 查询代码。
    • 底部统计总条数代码。
    • 
      
      rom Tb_person "+connect+"  order by 
    • 
      
      time from Tb_person " + connect + " ) as a where a.
    public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "application/json";
    
                //接受前台传递来的页数和每页显示的条数
                //前台开启分页之后,传递来的参数
                int pageIndex = Convert.ToInt32(context.Request["page"]);
                int pagenumber = Convert.ToInt32(context.Request["rows"]);
    
    
                //接收排序字段
                string sortfield = context.Request["sort"];
                string sortDescOrasc = context.Request["order"];
    
    
                //------------------------------------------搜索-----------------------------------------
                string connect = "";
                string searchvalue = "";
                string time_from = "";
                string time_to = "";
    
                if (context.Request["searchvalue"] != null && context.Request["searchvalue"] != "")
                {
                    searchvalue = "name like '%" + context.Request["searchvalue"] + "%' and ";
                    connect += searchvalue;
                }
    
                if (context.Request["time_from"] != null && context.Request["time_from"] != "")
                {
                    time_from = "createtime>='" + context.Request["time_from"].Replace('/','-') + "' and ";
                    connect += time_from;
                }
    
                if (context.Request["time_to"] != null && context.Request["time_to"] != "")
                {
                    time_to = "createtime<='" + context.Request["time_to"].Replace('/', '-') + "' and ";
                    connect += time_to;
                }
    
                if (connect != "")
                {
                    connect = " where " + connect.Substring(0, connect.Length - 4);
                }
                //--------------------------------------------------------------------------------------------
    
    
                //存储数据
                DataTable dt = new DataTable();
    
                if (pageIndex == 1)
                {
                    //加载第一页
                    string pageIndexOne = "select top " + pagenumber + " id, name, sex, createtime from Tb_person "+connect+"  order by " + sortfield + " " + sortDescOrasc + "";
                    //获取并转换为JSON数据
                    dt = SQLHelper.ExecuteTable(pageIndexOne, CommandType.Text);
                }
                else if (pageIndex != 1)
                {
                    //加载非第一页
                    string pageIndexNotOne = @"select id, name, sex, createtime from (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") as rownum, id, name, sex, createtime from Tb_person " + connect + " ) as a where a.rownum > " + (pageIndex - 1) * pagenumber + " and a.rownum <= " + pageIndex * pagenumber + "";
                    //获取并转换为JSON数据
                    dt = SQLHelper.ExecuteTable(pageIndexNotOne, CommandType.Text);
                }
                else { }
    
    
                //将datatable转换为json
                //在返回的JSON数据中,加入total属性(总记录数)
                //那么他就会在加载的时候,显示总记录数。
                //显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。
                //计算总条数(同时可以统计,使用关键字查询之后的条数)
                int totalnumber = (int)SQLHelper.ExcuteScalar("select count(*) from Tb_person " + connect + "", CommandType.Text);
                //返回数据
                string strjson = "{"total":" + totalnumber + ", "rows":" + DatatableToJson.ToJson(dt) + "}";
    
                context.Response.Write(strjson);
            }
  • 相关阅读:
    LeetCode: Reverse Linked List
    DataBase: MySQL在.NET中的应用
    DataBase: LeetCode
    DirectShow+VS2010+Win7配置说明
    MathType应用:批量改变公式格式
    $LaTeX$笔记:首字下沉
    Latex学习笔记-序
    反思--技术博客的写作应该是怎样的?
    用Latex写学术论文:作者(Author)&摘要(Abstract)
    用Latex写学术论文: IEEE Latex模板和文档设置(documentclass)
  • 原文地址:https://www.cnblogs.com/KTblog/p/4928072.html
Copyright © 2011-2022 走看看