1. 程式人生 > 實用技巧 >Jquery EasyUI 動態建立標籤

Jquery EasyUI 動態建立標籤

示例:

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; } } });