EasyUI使用实例

function GetKeysList() {
    $.getJSON("/RobotService/GetKeysList", {}, function (data) {
        $("#tagTabList").empty();
        var retVal = eval(data);
        var retFlag;
        $.each(retVal, function (i, val) {
            if (i == "ret") {
                retFlag = val;
            }
            if (i == "data" && retFlag == 0)//查询成功
            {
                var tabText = "";
                var text = "<tr>";
                $.each(val, function (j, vall) {
                    if (vall.ID != undefined) {
                        if ((j + 1) % 4 != 0) {
                            text += '<td><input id="chk_tag_' + vall.ID + '" type="checkbox" οnclick="chkTag(this)"><label for="chk_tag_' + vall.ID + '">' + vall.TagName + '</label></td>';
                        } else {
                            tabText = tabText + text;
                            tabText = tabText + '<td><input id="chk_tag_' + vall.ID + '" type="checkbox" οnclick="chkTag(this)"><label for="chk_tag_' + vall.ID + '">' + vall.TagName + '</label></td>';
                            tabText = tabText + "</tr>";
                            $("#tagTabList").append(tabText);
                            tabText = "";
                            text = "<tr>";
                        }
                    }
                });
                resetChks();
            }
        });
    });


}




//初始化表格
function initTable() {
    $('#test').datagrid({
        title: '没有答案的问题维护页面',
        iconCls: 'icon-save',
        width: 'auto',
        nowrap: false,
        striped: true,
        url: '/RobotService/GetAllNoAnswerQuestion',
        // sortName: 'FeedbackID',
        //  sortOrder: 'desc',
        idField: 'AdTypeID',
        frozenColumns: [[
            { field: 'ck', checkbox: true }
        ]],
        columns: [[
            { field: 'ID', title: 'ID', width: 120 },
            { field: 'TagNames', title: '关键词组', width: 200 },
            { field: 'Question', title: '未回答问题', width: 580 },
            {
                field: 'CreateTime',
                title: '创建时间',
                width: 135,
                formatter: function (value, rec) {
                    return eval(rec.CreateTime.replace(/\/Date\((.+)\)\//gi, "new Date($1)")).pattern("yyyy-MM-dd HH:mm:ss");
                }
            }
        ]],


        pagination: true,
        rownumbers: true,
        singleSelect: false,
        toolbar: [
        {
            text: '添加',
            iconCls: 'icon-add',
            handler: function () {
                addClickEvent();
            }
        }, '-',
            {
                text: '修改',
                iconCls: 'icon-edit',
                handler: function () {
                    editClickEvent();
                }
            }, '-',
            {
                text: '删除',
                iconCls: 'icon-remove',
                handler: function () {
                    deleteEvent();
                }
            }]
    }
    );
    //  $('#test').datagrid('hideColumn', 'Name');
}




function editClickEvent() {
    //第一步拿到  easyui里面的选中的项
    var selectedRows = $('#test').datagrid("getSelections");
    if (selectedRows.length <= 0) {
        $.messager.alert("错误提醒", "请选中要编辑数据！", "question");
        return;
    }


    if (selectedRows.length > 1) {
        $.messager.alert("错误提醒", "只能选中一条要编辑数据！", "question");
        return;
    }




    /  获取对应条目的信息，并设置控件对应值
    for (var key in selectedRows) {
        var qTagNames = selectedRows[key].TagNames;
        var Question = selectedRows[key].Question;
        获取所有的Keys并列表显示
        GetKeysList();
        
        //为响应条目赋值
        $("#tagNames").val(qTagNames);
        $("#questionID").val(Question);
    }


    $("#editAnswerDiv").css("display", "block");
    $("#editAnswerDiv").dialog({
        title: "添加答案",
        modal: true,
        width: 'auto',
        collapsible: true,
        minimizable: true,
        maximizable: true,
        resizable: true,
        buttons: [{
            id: 'btnOk',
            text: '添加',
            iconCls: 'icon-ok',
            handler: subEditForm
        }, {
            id: 'btnCancel',
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
                $("#editAnswerDiv").dialog("close");
            }
        }]
    });
}




把表单提交到后台。
function subEditForm() {
    /首先判断各字段格式是否正确


    $.getJSON("/AD/EditADItems", { ADID: $("#ADID").val(), AdTitle: $("#ADTitle").val(), AdTypeID: $("#AdTypeID").val(), AdStatusID: $("#AdStatusID").val(), StartTime: $("#StartTime").val(), EndTime: $("#EndTime").val(), ADCUrl: $("#ADCU").val() }, function (data) {
        var dat = eval(data);
        if (dat == 0) {
            $.messager.alert("提醒消息", "修改成功", "success");
            $("#addDialogDiv").dialog("close");
            initTable();
        } else {
            $.messager.alert("提醒消息", "修改失败", "error");
        }


    });
}
















$(function () {


    $("#tagNames").blur(resetChks);
    $("#editAnswerDiv").css("display", "none");
    initTable();
});






function chkTag(e) {
    var val = "";
    var arr = $("#tagNames").val().toLowerCase().split(/[,，]+/g);


    if (arr.length >= 5 && e.checked == true) {
        alert("最多只能添加5个标签");
        e.checked = false;


    }






    if (e.checked) {
        val = $("#tagNames").val().trim(',').trim('，') + ',' + $(e).next().text();
        val = val.trim(',').trim('，');
    } else {
        val = $("#tagNames").val().replace(new RegExp("(^|[,，])(" + $(e).next().text().replace(/([()])/g, '\\$1') + ")([,，]|$)", "ig"), function (all, s1, s2, s3) {
            return (s1 && s3) ? s1 : '';
        });
    }
    $("#tagNames").val(val.trim(','));
    var firstIndex = $("#tagNames").val();
    var fText = firstIndex.substr(0, 1);
    if (fText == ',' || fText == '，') {
        firstIndex = firstIndex.substr(1, firstIndex.length);
        $("#tagNames").val(firstIndex);
    }
}
/*根据输入的tags重置选择框状态*/
function resetChks() {
    var arr = $("#tagNames").val().toLowerCase().split(/[,，]+/g);
    $("#tagTabDiv input").each(function () {
        var has = false;
        var val = $(this).next().text().toLowerCase();
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == val) { has = true; break; }
        }
        this.checked = has;
    });
}