复选框查看详情 - 三人乐乐

复选框查看详情

//回答园友博问：需求是这样得 一个页面中分了两栏 上下都是表格 要求当后台根据查询条件是显示到上表格中，但当选择上表格某一条数据时 下面这一个表格要显示选中这条数据得详细信息，如果上面表格同时选中多个就要在下面表格显示多个对应的详细数据

//前台：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table, th, td {
            border: 1px solid blue;
        }

        table {
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            getTypeData();
        });

        //获取类型
        function getTypeData() {
            $.ajax({
                url: "/Handler.ashx",
                type: "post",
                data: { "func": "getType" },
                dataType: "json",
                success: function (json) {
                    var html = "<tr><td>选择</td><td>类型</td></tr>";
                    for (var i = 0; i < json.length; i++) {
                        html += "<tr>";
                        html += "<td><input class='myCss' type='checkbox' onclick='getDetails()' name='chk' value='" + json[i]._id + "'></td>";
                        html += "<td>" + json[i]._type + "</td>";
                        html += "</tr>";
                    }
                    $('#tbType').html(html);
                },
                error: function () { }
            });
        }

        //获取所有选择详情
        function getDetails() {
            var ids = "";
            var length = $(".myCss[name='chk']:checked").length;
            if (length == 0) {
                $('#tbDetails').html("");
                return;
            }
            else {
                $(".myCss[name='chk']:checked").each(function () {
                    ids += $(this).val() + ",";
                });
                getDetailsData(ids);
            }
        }

        //获取所有选择详情
        function getDetailsData(ids) {
            $.ajax({
                url: "/Handler.ashx",
                type: "post",
                data: { "func": "getDetails", "ids": ids },
                dataType: "json",
                success: function (json) {
                    var html = "<tr><td>ID</td><td>名称</td><td>类型</td></tr>";
                    for (var i = 0; i < json.length; i++) {
                        html += "<tr>";
                        html += "<td>" + json[i]._id + "</td>";
                        html += "<td>" + json[i]._name + "</td>";
                        html += "<td>" + json[i]._type + "</td>";
                        html += "</tr>";
                    }
                    $('#tbDetails').html(html);
                },
                error: function () { }
            });
        }
    </script>
</head>
<body>
    <div>
        <span>类型</span>
        <table id="tbType"></table>
        <br />
        <span>详情</span>
        <table id="tbDetails"></table>
    </div>
</body>
</html>

//后台

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Newtonsoft.Json;

public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        var func = context.Request["func"] ?? string.Empty;
        var json = "";
        switch (func)
        {
            case "getType":
                json = GetTypeData();
                break;
            case "getDetails":
                var ids = context.Request["ids"] ?? string.Empty;
                json = GetDetails(ids);
                break;
            default:
                break;
        }
        context.Response.Write(json);
        context.Response.End();
    }

    private string GetTypeData()
    {
        List<MyType> lst = new List<MyType> {
             new MyType(){ _id = 1, _type = "类型1"},
             new MyType(){ _id = 2, _type = "类型2"},
             new MyType(){ _id = 3, _type = "类型3"},
        };
        //json化
        var json = Newtonsoft.Json.JsonConvert.SerializeObject(lst).ToString();
        return json;
    }

    private string GetDetails(string ids)
    {
        if (!string.IsNullOrEmpty(ids) && !ids.Contains("undefined") && ids.Contains(","))
        {
            ids = ids.Substring(0, ids.Length - 1);
        }
        var strArr = ids.Split(',');
        List<MyDetails> lst = new List<MyDetails>();
        MyDetails model;
        for (int i = 0; i < strArr.Length; i++)
        {
            model = new MyDetails
            {
                _id = Convert.ToInt32(strArr[i]),
                _name = "名称" + strArr[i],
                _type = "类型" + strArr[i]
            };
            lst.Add(model);
        }
        //json化
        var json = Newtonsoft.Json.JsonConvert.SerializeObject(lst).ToString();
        return json;
    }

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


public class MyType
{
    public int _id { get; set; }
    public string _type { get; set; }
}

public class MyDetails
{
    public int _id { get; set; }
    public string _name { get; set; }
    public string _type { get; set; }
}

posted on 2019-04-01 13:32 三人乐乐阅读(734) 评论(0) 编辑收藏举报