Question

我在jQuery和asp.net中使用json从数据库中获取数据，我每次都为每个表执行此操作。有没有办法创建一个函数并传递一些参数，如（列名，表名和控件显示）所有表。

function LoadData(Url, Data, ControlToShow, Columns){
    $.ajax({ type: "post",
        url: Url,
        data: Data,
        contentType: "application/json;charset=utf-8", dataType: "json",
        success: function (data) {
            if (data.d != null || data.d != 'null') {
                var items = data.d;

                $("#" + ControlToShow).append(items[0].Columns[1]);
            }
        }
}

或者换句话说，通过传递列名如

来使用json数组对象动态

var items = response.d;
var colName = 'Customers';
alert(items[0].colName);

colName = 'CustomerID';
alert(items[0].colName);

或类似的东西。

Answer 1

在javascript中，只需按名称访问属性即可访问这些属性：

var items = response.d;
alert(items[0].Customers);  
alert(items[0].CustomerID);

或者如果属性的名称存储在变量中，您可以像以下一样访问它们：

var items = response.d;
var colName = 'Customers';
alert(items[0][colName]);

colName = 'CustomerID';
alert(items[0][colName]);

Answer 2

尝试创建像这样的json。所以你可以读取列和数据来创建表。

     {"column_name":['column1','column2','column3'],"records":[{'id':1 ...}]}

检查编辑代码，FIDDLE

        $(function(){
            var json ={"column_name":['ID','COUNTRY'],"records":[{"id":1 ,"name": "USA"},{"id":2 ,"name": "INDIA"},{"id":3 ,"name": "AUSTRALIA"}]};
            var column_arr = json.column_name;
            var column_arr_length = column_arr.length;//no of column present.

            // creating table header
            var $thead = $('#mytable thead');
            var row = '<tr>'
            for(var i= 0; i< column_arr_length;i++){
                row += '<th>'+column_arr[i]+'</th>';
            }
            row += '</tr>';

            $thead.append(row);// adding head to table

            // creating table body
            var $body = $('#mytable tbody');
            var body_data = json.records;
            var body_data_length = body_data.length;//no of row in  body.
            var body_row = '';
            for(var i= 0; i< body_data_length;i++){
                var row_obj = body_data[i];
                console.log(row_obj);
                body_row += '<tr>';
                for(var key in row_obj){
                    body_row += '<td>'+row_obj[key]+'</td>';
                }
                body_row += '</tr>';
            }

            $body.append(body_row);// adding rows to table
        })

HTML CODE

    <table id="mytable">
        <thead></thead>
        <tbody></tbody>
    </table>

Answer 3

是的，你可以这样做： -

function LoadData(Url, Data, ControlToShow, ColumnName) {
    $.ajax({
        type: "post",
        url: Url,
        data: Data,
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (data) {
            if (data.d != null) {
                var items = data.d;
                $("#" + ControlToShow).append(items[0][ColumnName]);
            }
        }
    });
}

并称之为：

LoadData(serviceUrl, {data_you_need_to_pass}, 'ControlID', 'CustomerID');

Answer 4

您可以创建模板视图并传入每个表的数据。在body部分中，您可以简单地遍历数据并将其附加到表的body部分。

<table id="<%= YOUR TABLE NAME %>">
<thead>
<tr>
<th><% YOUR COLUMN NAME %></th>
....
</tr>
<thead>
<tbody class="mytable"></tbody>
...
</table>

success: function (data) {
            if (data.d != null || data.d != 'null') {
                var items = data.d;

var tr = $('<tr></tr>').appendTo('.mytable');
                $.each(data.d, function(){

                  //append your td elements to your tr above

                });
            }
    }

动态json数组对象

4 个答案: