ajax-动态添加控件

最新推荐文章于 2021-08-06 17:57:36 发布

MMMark7

最新推荐文章于 2021-08-06 17:57:36 发布

阅读量730

点赞数

CC 4.0 BY-SA版权

分类专栏： B-C 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/zhangjiahao7521/article/details/78218664

B-C 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何利用AJAX技术动态地为表格添加数据并绑定控件。通过innerHTML属性更新table内容，实现元素的动态创建。同时，推荐参考相关教程以了解更多技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　首先使用AJAX动态绑定数据。
　　在给actioncolumn列赋值的时候使用innerHTML，为table写入一个新的元素 document.innerHTML =’新元素’

/*查询按钮 表格获取内容*/
function query() {
    //判断三个选项是否都为空，如果都为空则返回
    if ($('#select_goods').val() == '' && $('#select_date').val() == '' && $('#select_storage').val() == '') {
        alert('请选择查询条件');
        return;
    }
        //至少有一个选项不为空，就可以查询
    else {
        $.ajax({
            type: "get",
            url: "/WarehousingLog/resultee",
            data: "select_goods=" + $("#select_goods").val() + "&select_date=" + $("#select_date").val() + "&select_storage=" + $("#select_storage").val(),
            dataType: "json",
            success: function (data) { 

                //循环，向data1里添加数据               place=仓库名称+货位ID   actioncolumn=编辑、删除
                for (var i = 0; i < data.length; i++) {
                    var data1 = [];
                    data1.push({ "serial": data[i].Serial, "ItemNo": data[i].ItemNo, "ItemName": data[i].ItemName, "CategoryName": data[i].CategoryName, "Number": data[i].Number, "price": data[i].Price, "place": data[i].StorageName+data[i].PositionID, "op": data[i].Op, "applicant": data[i].Applicant, "Explain": data[i].Explain, "isConsumables": data[i].IsConsumables, "actioncolumn": document.innerHTML = '<a href="#"">编辑</a>丨<a href="#">删除</a>' });
                }

                //在下拉框中加载变量中数据
                $("#dg").datagrid("loadData", data1) //加载数据
            },
            error: function (data) {
                alert("系统出错了，请联系管理员");

            }
        });
    }
}/*查询按钮 表格获取内容*/