Jquery EasyUI 动态创建标签

Posted 2020-12-16 zhangmin1314

示例：

 

var htmlTemp = "<div class="listTemp""><input class= "easyui-textbox theme-textbox-radius" style = "width:960px;height:28px;" readonly="readonly" /></div >";
var targetObj = $(htmlTemp).appendTo(".listBody");
$(".listTemp:eq(0) input").val("111");            //放在渲染$.parser.parse(targetObj)之前
$.parser.parse(targetObj);
$(".listTemp:eq(0) input").attr("seq", 1);        //attr放在渲染$.parser.parse(targetObj)之后

 

动态创建标签时，html的内容必须以 javascript 字符串的形式提供；

不能在html文档中写好，再用 $("#?").outerHTML() 获取添加来动态创建；

 

 

 

$(function () {
    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
    var ts = {
        week: 7,
        tweek: 14,
        month: 28,
        ji: 91,
        year: 364
    }
    var planData;
    $(‘#combbox‘).combobox({
        onSelect: function (param) {
            editRow = [];
            cancelRow = [];
            $.ajax({
                url: "/UpkeepPlan/Find",
                type: "post",
                dataType: "json",
                data: { equipType: param.value },
                success: function (data) {

                    $("#planList").datagrid(                 //选择条件，加载datagrid数据； 
                        ‘load‘, { equipType: param.value },
                    );

                    $.each(ts, function (name, time) {
                        $(".listTemp_" + name).remove();
                        var htmlTemp = "<div class="listTemp listTemp_" + name + ""><input name="" + name + "" class= "easyui-textbox theme-textbox-radius" style = "width:960px;height:28px;" readonly="readonly" /></div >";
                        var targetObj = $(htmlTemp).appendTo(".listBody_" + name);
                        $.parser.parse(targetObj);
                        if (data._pmItem != null && data._pmItem != undefined) {
                            for (var j = 0; j < data._pmItem.length; j++) {
                                if (data._pmItem[j] != null && data._pmItem[j].time == time) {
                                    if (data._pmItemDetails != null && data._pmItemDetails != undefined) {
                                        $(".listTemp_" + name).remove();
                                        var k = -1;
                                        for (var i = 0; i < data._pmItemDetails.length; i++) {
                                            if (data._pmItem[j].id == data._pmItemDetails[i].id) {
                                                k++;
                                                targetObj = $(htmlTemp).appendTo(".listBody_" + name);
                                                $(".listTemp_" + name + ":eq(" + k + ") input").val(data._pmItemDetails[i].text);
                                                $.parser.parse(targetObj);
                                                $(".listTemp_" + name + ":eq(" + k + ") input").attr("seq", data._pmItemDetails[i].seq);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    });

                    planData = data._pmplan;
                },
                error: function (rq) {
                    alert("error:" + rq.statusText + "responseText:" + rq.responseText);
                }
            });
        }
    });
    var editRow = [];
    var cancelRow = [];
    var afterEditRow = [];
    var EditRowNum = 0;
    var planList = $(‘#planList‘).datagrid({      //创建datagrid列表
        url: ‘/UpkeepPlan/FindEquipId‘,
        fit: true,
        singleSelect: false,
        method: ‘post‘,
        fitColumns: false,
        striped: true,
        rownumbers: true,
        toolbar: [{
            text: ‘保存‘,
            iconCls: ‘icon-save‘,
            handler: function () {
                EditRowNum = 0;
                afterEditRow = [];
                if (editRow.length>0) {
                    $.each(editRow, function (index, value) {
                        EditRowNum++;
                        $(‘#planList‘).datagrid("endEdit", value);
                    });
                }
                if (editRow.length <= 0) {
                    $.ajax({
                        url: "/UpkeepPlan/Delete",
                        type: "post",
                        dataType: "json",
                        data: { reqdata: JSON.stringify(cancelRow), equipType: $("#combbox").combobox(‘getValue‘) },
                        success: function (data) {
                            $.messager.alert(‘提示‘, data.message, ‘info‘);
                        },
                        error: function (rq) {
                            alert("error:" + rq.statusText + "responseText:" + rq.responseText);
                        }
                    });
                }
            }
        }],
        columns: [[
            { field: ‘ck‘, checkbox: true, width: 200, align: ‘center‘ },
            {
                field: ‘equipId‘, title: ‘设备编号‘, width: 200, align: ‘center‘
            },
            {
　　　　　　　　　　//显示时间控件
                field: ‘startTime‘, title: ‘开始时间‘, width: 300, align: ‘center‘, editor: {
                    type: ‘datebox‘, options: { editable: true }, formatter: function (value, row, index) {
                        return changeDateFormat(value)
                    } }
            }
        ]],
        onCheck: function (index, field, value) {
            $(this).datagrid(‘beginEdit‘, index);
            editRow.push(index);
            cancelRow.remove(field);
        },
        onUncheck: function (index, field, value) {
            $(this).datagrid(‘cancelEdit‘, index);
            if (editRow.indexOf(index)>-1) {
                editRow.remove(index);
                cancelRow.push(field);
            }
        },
        onAfterEdit: function (rowIndex, rowData, changes) {
            afterEditRow.push(rowData);
            if (editRow.length == EditRowNum) {
                $.ajax({
                    url: "/UpkeepPlan/Save",
                    type: "post",
                    dataType: "json",
                    data: { sdata: JSON.stringify(afterEditRow), cdata: JSON.stringify(cancelRow), equipType: $("#combbox").combobox(‘getValue‘) },
                    success: function (data) {
                        $.messager.alert(‘提示‘, data.message, ‘info‘);
                    },
                    error: function (rq) {
                        alert("error:" + rq.statusText + "responseText:" + rq.responseText);
                    }
                });
            }
        },
        onLoadSuccess: function (data) {
            var rows = data.rows;
            if (rows.length>0) {
                $.each(rows, function (name, value) {
                    $("#planList").datagrid(‘unselectRow‘, name);
                    var ed1 = $("#planList").datagrid(‘refreshRow‘, name);
                    if (planData != null && planData.length > 0) {
                        for (var i = 0; i < planData.length; i++) {
                            if (value.equipId == planData[i].equipId) {
                                $("#planList").datagrid(‘selectRow‘, name);              //根据服务器返回的数据行选中，日期控件赋值；
                                var ed = $("#planList").datagrid(‘getEditor‘, { index: name, field: ‘startTime‘ });      //
                                $(ed.target).datebox(‘setValue‘, changeDateFormat(planData[i].startTime));
                            }
                        }
                    }
                });
            }
        }
    });
    changeDateFormat=function(cellval) {
        if (cellval != null) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
    }
});