.NET使用EasyUI绑定datagrid数据，并实现行页面跳转

code:9527

于 2021-03-23 10:05:56 发布

阅读量632

点赞数 2

本文链接：https://blog.csdn.net/Jacob946/article/details/115110548

版权

目的：

明确目的，如标题所示，我们要使用EasyUI中的datagrid控件进行数据的绑定。和点击某一行的单元格跳转到想要的其他界面。直接上代码
前端代码：

<script>

        $(document).ready(function () {
            var para = "<%=Session["UserName"]%>";
            $('#dg').datagrid({
                title: '标题设置',
                iconCls: 'icon-save',
                url: '../SystemSet/SS_ApproveList.ashx?AppName=' + para,   
                dataType: 'json',
                width: "100%", 
                striped: true, 
                pagination: true, 
                pageSize: 20, 
                columns: [[ //每页具体内容
                            { field: 'appr_nbr', title: '单号', width: 160, formatter: rowformater, onClickRow: delHsCode, sortable: true, align: 'center' },
                            { field: 'appr_type', title: '类型', width: 120, align: 'center' },
                            { field: 'appr_user', title: '审批人', width: 120, align: 'center' },
                            { field: 'form_application', title: '申请人', width: 120, align: 'center' },
                            { field: 'le_CreateTime', title: '创建时间', width: 120, align: 'center' },
                            { field: 'le_Type', title: '标题', width: 180, align: 'center' },
                            { field: 'le_Dept', title: '岗位信息', width: 120, align: 'center' },
                ]],


            })
        });


        function addTab(title, url) {
            if ($('#tt').tabs('exists', title)) {
                $('#tt').tabs('select', title);
            } else {
                var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:98%;"></iframe>';
                $('#tt').tabs('add', {
                    title: title,
                    content: content,
                    closable: true
                });
            }
        }

        function rowformater(value, row, index) {
            return '<a href="#" style="color:red" onClick="delHsCode(' + index + ')">' + value + '</a>';
        }

        function delHsCode(index) {
            $('#dg').datagrid('selectRow', index);
            var row = $('#dg').datagrid('getSelected');
                addTab(row.appr_nbr, 'JQLC/JQLC_Approval.aspx')
            }
        }

    </script>

<body>
    <form id="form1" runat="server">
      <div id="tt" class="easyui-tabs" style="width: 1330px; height: 715px; margin-left: 265px; margin-top: 1px;">
        <div title="Home">
		  <div style="margin: 5px;">
			 <table id="dg"></table>
			 </div>
	    </div>
      </div>
    </form>
</body>

2、后端代码：
声明：这是一个一般处理页面

  public class SS_ApproveList : IHttpHandler
    {
        string conne = System.Configuration.ConfigurationManager.AppSettings.Get("connectionstring");
        public void ProcessRequest(HttpContext context)
        {
            string name = context.Request.QueryString["AppName"];//前台传的标示值
            string storeProcedureName = "sp_tasklist";
            SqlParameter[] paras = new SqlParameter[]{
                new SqlParameter("@application",SqlDbType.VarChar,30)
            };
            paras[0].Value = name;
            DataTable dt = EL.DBUtitily.SqlHelper.GetTable(conne, CommandType.StoredProcedure, storeProcedureName, paras);
            if (dt.Rows.Count>0)
            {
                string jsonstr = El.DBUtitily.JsonData.ShouwData(dt);
                context.Response.Write(jsonstr);
                context.Response.End();
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

运行后的效果图：
在这里插入图片描述
点击单号LEA210322009进行跳转页面如下（dome）：

到这里，一个简单的easyUI数据的绑定和页面的跳转就实现了。

喜欢博主的可以一键三连，点赞关注

code:9527

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
.NET使用EasyUI绑定datagrid数据，并实现行页面跳转

目的：明确目的，如标题所示，我们要使用EasyUI中的datagrid控件进行数据的绑定。和点击某一行的单元格跳转到想要的其他界面。直接上代码前端代码：<script> $(document).ready(function () { var para = "<%=Session["UserName"]%>"; $('#dg').datagrid({ title: '标题设置',
复制链接

扫一扫