EasyUI常用表格和方法

发布时间 2023-07-04 17:39:03作者: 蜗牛的礼物

好久没碰过EasyUI了,列个目前使用的(以备不时之需-毕竟有些参数官网找得慢)

1.基础设置

//获取值
$('#id').combobox('getValue');
$('#id').textbox('getValue');
$('#id').checkbox('options').checked;

//设置值
$('#id').combobox('setValue', '');
$('#id').textbox('setValue', '');
$('#sel_chk').checkbox({ checked: true });

 

以下在实际使用中使用

    var pageIndex = 1;
    var pageSize = 10;
    var chkCode = "";//检测故障代码
    var checkId = 0;//检测是流水号Id
    var fsta = "";//2:未检测,3:初步检测

    //左边data
    function getLeftData(pageIndex, pageSize, condition) {
        //初始化DateGrid
        $.get('url?pageIndex=' + pageIndex + '&pageSize=' + pageSize + '&condition=' + condition, function (data) {
            if (data != null) {
                //表格数据
                $('#l_tabGrid').datagrid({
                    autoSizeColumn: true,
                    pagination: true,
                    pageNumber: pageIndex,
                    pageSize: pageSize,
                    pageList: [10, 20, 50, 80, 100],
                    fitColumns: true,
                    singleSelect: true,
                    rownumbers: true,
                    selectOnCheck: true,
                    checkOnSelect:true,
                    loadMsg: '加载中...',
                    data: data.item2,
                    queryParams: {
                        pageIndex: 1,
                        pageSize: 10
                    },
                    frozenColumns: [[
                        { field: 'Id', checkbox: true }
                    ]],
                    columns: [[
                        { field: '字段名', title: '列名', width: 100 },
                    ]],
                    onLoadSuccess: function () {
                    },
                    onClickRow: function (index, row) {
                        if (row != null) {
                            //初始化右边表格
                            getRightData(row);
                        }

                    }
                });

                //表格分页
                var pageNum = parseInt(data.item1 / pageSize);
                var from = (pageIndex - 1) * pageSize + 1;
                var to = pageIndex * pageSize;
                if (data.item1 % pageSize > 0)
                    pageNum = pageNum + 1;
                $('#l_tabGrid').datagrid('getPager').pagination({
                    total: data.item1,
                    pageSize: pageSize,
                    pageNumber: pageIndex,
                    loadMsg: '正在加载数据,请稍后...',
                    beforePageText: '',
                    // 页数文本框前显示的汉字
                    afterPageText: '页 共 ' + pageNum + '',
                    displayMsg: '当前显示 ' + from + ' - ' + to + ' 条记录 共 ' + data.item1 + ' 条记录',
                    //onBeforeRefresh: function () {
                    //    alert('before refresh');
                    //},
                    //onRefresh: function (pageNumber, pageSize) {
                    //    alert("onRefresh");
                    //},
                    //onChangePageSize: function () {
                    //    alert('pagesize changed');
                    //},
                    onSelectPage: function (pageIndex, pageSize) {
                        getLeftData(pageIndex, pageSize, condition);
                    }
                });
            }
        });
    }
    //右边data
    function getRightData(row) {
        //初始化下拉框
        chkCode = "";
        checkId = 0;
        fsta = "";
        //批次
        $("#sel_PanelModel").combobox({
            valueField: 'fPanelModelCheck',
            textField: 'fPanelModelCheck',
            url: 'url?tpNo=' + row.tp料号,
            disabled: true
        });
        //成色
        $('#sel_Fineness2').combobox({
            valueField: 'fcodeName',
            textField: 'fcodeName',
            url: 'url',
            disabled: true
        });
        //品牌
        $('#sel_Brand').combobox({
            valueField: 'fcodeName',
            textField: 'fcodeName',
            url: 'url',
            disabled:true
        });

        $('#sel_FRU').textbox({
            disabled:true
        });
        $('#sel_SN').textbox({
            disabled: true
        });
        $('#sel_TPNo2').textbox({
            disabled: true
        });
        $('#sel_RealNo').textbox({
            disabled: true
        });

        //流水号
        $('#sel_PPID').textbox('setValue', '');
        //成色
        $('#sel_Fineness2').combobox('setValue', row.成色);
        //品牌
        $('#sel_Brand').combobox('setValue', '');
        $('#sel_FRU').textbox('setValue', '');
        $('#sel_PanelModel').combobox('setValue', '');
        $('#sel_SN').textbox('setValue', '');
        $('#sel_TPNo2').textbox('setValue', row.tp料号);
        $('#sel_RealNo').textbox('setValue', '');

        //初始化部件框
        $.get('url', function (data) {
            if (data != null) {

                //部件初始化
                $('#sel_Componment').html('');
                var htm = '';
                for (var i = 1; i <= data.length; i++) {
                    htm = htm + '<input class="easyui-checkbox chk_errC" type="checkbox" id="chk_errorC' + i + '">';
                }
                $('#sel_Componment').html(htm);

                for (var i = 1; i <= data.length; i++) {
                    $('#chk_errorC' + i).checkbox({
                        label: data[i - 1].fcodeName,
                        value: data[i - 1].fcodeName,
                        labelPosition: "after",
                        labelAlign: "left",
                        labelWidth: 60,
                        checked: true,
                        disabled: true
                    });
                }
            }
        });

        //初始化DateGrid
        $.get('url', function (data) {
            if (data != null) {
                //初始化错误复选框
                $('#r_tabGrid').html('');
                var htm = '<div style="margin-bottom:20px">';
                for (var i = 1; i <= data.length; i++) {
                    htm = htm + '<input class="easyui-checkbox chk_err" type="checkbox" id="chk_error' + i + '">';
                    if (i % 4 == 0) {
                        htm = htm + '</div>';
                        htm = htm + '<div style="margin-bottom:20px">';
                    }
                }
                htm = htm + '</div>';
                $('#r_tabGrid').html(htm);

                for (var i = 1; i <= data.length; i++) {
                    $('#chk_error' + i).checkbox({
                        label: data[i-1].fdesc,
                        value: data[i - 1].fcode,
                        labelPosition: "after",
                        labelAlign: "left",
                        labelWidth: 200,
                        checked: false,
                        disabled: true,
                        onChange: function (v) {
                            var code = GetRightCheckErrorStr();
                            GetErrorInfo(code)
                        }
                    });
                }
            }
        });
    }

    function formatterTime(value){
        var date = new Date(value);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        var h = date.getHours();
        var M = date.getMinutes();
        var s = date.getSeconds();
        return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
            + ' ' + (h < 10 ? ('0' + h) : h) + ':' + (M < 10 ? ('0' + M) : M) + ':' + (s < 10 ? ('0' + s) : s);
    }

    function formatterDate(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
    }

    function formatterParser(s) {
        var t = Date.parse(s);
        if (!isNaN(t)) {
            return new Date(t);
        } else {
            return new Date();
        }
    }

    //操作

    //查询
    $('#l_search').click(function () {
        var batchNo = $('#sel_BatchNo').combobox("getValue");
        var fineness = $('#sel_Fineness').combobox("getValue");

        var tpNo = $('#sel_TPNo').textbox("getValue");

        var whereStr = " 1=1 ";
        if (batchNo != '')
            whereStr += " and 批次号='" + batchNo + "'";
        if (fineness != '')
            whereStr += " and 成色='" + fineness + "'";
        if (tpNo != '')
            whereStr += " and TP料号='" + tpNo + "'";

        getLeftData(pageIndex, pageSize, whereStr);
    });

    //初始化右边数据(可编辑)
    function RDateInitEdit() {
        var quality = $('#sel_Fineness2').combobox("getValue");
        //成色
        $('#sel_Fineness2').combobox({
            disabled: false
        });
        $('#sel_Fineness2').combobox("setValue", quality);
        //品牌
        $('#sel_Brand').combobox({
            disabled: false
        });

        $('#sel_FRU').textbox({
            disabled: false
        });
        $('#sel_PanelModel').combobox({
            disabled: false
        });
        $('#sel_SN').textbox({
            disabled: false
        });
        $('#sel_TPNo2').textbox({
            disabled: false
        });
        $('#sel_RealNo').textbox({
            disabled: false
        });

        //部件
        $('.chk_errC').checkbox({
            checked: true,
            disabled: false
        })

        //故障
        $('.chk_err').checkbox({
            checked: false,
            disabled: false
        })

        //成色
        //$('#sel_Fineness2').combobox('setValue', '');
        //品牌
        $('#sel_Brand').combobox('setValue', '');
        $('#sel_FRU').textbox('setValue', '');
        $('#sel_PanelModel').combobox('setValue', '');
        $('#sel_SN').textbox('setValue', '');
        //$('#sel_TPNo2').textbox('setValue', '');
        $('#sel_RealNo').textbox('setValue', '');
        GetCheckNum();
    }

    //初始化右边数据(不可编辑)
    function RDateInitNoEdit() {
        checkId = 0;
        chkCode = "";
        fsta = "";
        $('#err_Info').html('请选故障');
        var quality = $('#sel_Fineness2').combobox("getValue");
        //成色
        $('#sel_Fineness2').combobox({
            disabled: true
        });
        $('#sel_Fineness2').combobox("setValue", quality);
        //品牌
        $('#sel_Brand').combobox({
            disabled: true
        });

        $('#sel_FRU').textbox({
            disabled: true
        });
        $('#sel_PanelModel').combobox({
            disabled: true
        });
        $('#sel_SN').textbox({
            disabled: true
        });
        $('#sel_TPNo2').textbox({
            disabled: true
        });
        $('#sel_RealNo').textbox({
            disabled: true
        });

        $('.chk_errC').checkbox({
            checked: true,
            disabled: true
        })

        $('.chk_err').checkbox({
            checked: false,
            disabled: true
        })

        //成色
        //$('#sel_Fineness2').combobox('setValue','');
        //品牌
        $('#sel_Brand').combobox('setValue', '');
        $('#sel_FRU').textbox('setValue', '');
        $('#sel_PanelModel').combobox('setValue', '');
        $('#sel_SN').textbox('setValue', '');
        //$('#sel_TPNo2').textbox('setValue', '');
        $('#sel_RealNo').textbox('setValue', '');
    }

    //获取故障信息
    function GetErrorInfo(code) {
        $.get('url?fCode=' + code, function (data) {
            if (data != null) { 
                $('#err_Info').html(data.msg);
                chkCode = data.code;
            }
        })
    }
    //获取当天检测数
    function GetCheckNum(code) {
        $.get('url', function (data) {
            if (data != null) {
                $('#chk_Num').html("+" + data);
            }
        })
    }

    //获取右侧故障选中集
    function GetRightCheckErrorStr() {
        var fCode = '';//故障代码集
        var chk_errList = $('.chk_err');
        for (var i = 0; i < chk_errList.length; i++) {
            var isCheck = $('#' + $('.chk_err')[i].id).checkbox('options').checked;
            var value = $('#' + $('.chk_err')[i].id).checkbox('options').value;
            if (isCheck) {
                fCode = fCode + value + ","
            }
        }
        chkErrCodeStr = fCode;
        return fCode;
    }

    //获取右侧部件选中集
    function GetRightCheckSubStr() {
        var fCode = '';//部件代码集
        var chk_errList = $('.chk_errC');
        for (var i = 0; i < chk_errList.length; i++) {
            var isCheck = $('#' + $('.chk_errC')[i].id).checkbox('options').checked;
            var value = $('#' + $('.chk_errC')[i].id).checkbox('options').value;
            if (isCheck) {
                fCode = fCode + value + ","
            }
        }
        chkErrCodeStr = fCode;
        return fCode;
    }

    //提交入库
    function Save() {
        $.messager.confirm('消息确认', '确认提交入库?', function (r) {
            if (r) {
                var row = $('#l_tabGrid').datagrid('getSelected');
                if (row) {
                    var ppid = $('#sel_PPID').textbox('getValue');//流水号
                    var fru = $('#sel_FRU').textbox('getValue');//FRU
                    var panelModel = $('#sel_PanelModel').combobox('getValue');//PanelModel
                    var sn = $('#sel_SN').textbox('getValue');//SN
                    var tpNo = $('#sel_TPNo2').textbox('getValue');//TP料号
                    var realNo = $('#sel_RealNo').textbox('getValue');//实际料号
                    var sub = GetRightCheckSubStr();//部件选中集
                    var quality = $('#sel_Fineness2').combobox('getValue');//成色
                    var matsup = $('#sel_Brand').combobox('getValue');//品牌
                    var errCodeStr = GetRightCheckErrorStr();//故障选中集

                    var category = row.类别;//类别
                    var pNo = row.批次号;//批次号
                    var boxCode = row.箱号;//箱号

                    var result = "";
                    if (ppid == null || ppid == "" || checkId == 0)
                        result = "请确认流水码并回车!";
                    else if (errCodeStr == "" || chkCode == "")
                        result = "故障不能为空!";
                    else if (matsup == "")
                        result = "品牌不能为空!";
                    else if (quality == "")
                        result = "成色不能为空!";
                    else if (chkCode == "1" && (realNo == null || realNo == ""))
                        result = "良品实际料号不能为空!";
                    else if (boxCode == null || boxCode == "")
                        result = "箱号不能为空!";

                    if (result != "") {
                        $.messager.alert('消息提醒', result, 'info');
                        return
                    }
                    $.post('url', {
                        Category: category,
                        PNo: pNo,
                        BoxCode: boxCode,
                        Id: checkId,
                        PPID: ppid,
                        CheckResultCode: chkCode,
                        ErrorCodeCheck: errCodeStr,
                        Sub: sub,
                        TPNo: tpNo,
                        UseSub: "",
                        Matsup: matsup,
                        SN: sn,
                        Quality: quality,
                        RealNo: realNo,
                        PanelModel: panelModel,
                        FRU: fru,
                        Fsta: fsta
                    }, function (data) {
                        if (data != null) {
                            $.messager.alert('消息提醒', data, 'info');
                            RDateInitNoEdit();
                            GetCheckNum();
                        } else {
                            $.messager.alert('消息提醒', '提交入库异常。', 'info');
                        }
                    })
                } else {
                    $.messager.alert('消息提醒', '请选择左侧待选RMA数据项!', 'info');
                }
            }
        });
    }

    //撤销初检
    function Cancel() {
        $('#sel_PPID2').textbox('setValue','');
        $('#win').window('open'); // open a window
    }

    //确认撤销初检
    function CancelOK() {
        var ppid = $('#sel_PPID2').textbox('getValue');
        if (ppid == "") {
            $.messager.alert('消息提醒', '请输入流水号!', 'info');

        } else { 
            $.messager.confirm('消息确认', '是否确认撤销初检?', function (r) {
                if (r) {
                    $.post('url', {
                        PPID: ppid,
                    }, function (data) {
                        $.messager.alert('消息提醒', data, 'info');
                        RDateInitNoEdit();
                        GetCheckNum();
                    })
                }
            });
            $('#win').window('close'); // open a window
        }
    }

    //清空
    function Clear() {
        //品牌
        $('#sel_Brand').combobox('setValue', '');
        $('#sel_FRU').textbox('setValue', '');
        $('#sel_PanelModel').combobox('setValue', '');
        $('#sel_SN').textbox('setValue', '');
        $('#sel_RealNo').textbox('setValue', '');

        //获取右侧故障选中集
        var chk_errCList = $('.chk_errC');
        for (var i = 0; i < chk_errCList.length; i++) {
            $('#' + $('.chk_errC')[i].id).checkbox('check');
        }

        //清空右侧部件选中集
        var chk_errList = $('.chk_err');
        for (var i = 0; i < chk_errList.length; i++) {
            $('#' + $('.chk_err')[i].id).checkbox("uncheck");
        }
    }

    $(function () {
        //搜索区域
        //初始化下拉框
        //批次
        $("#sel_BatchNo").combobox({
            valueField: '批次号',
            textField: '批次号',
            url: 'url'
        });
        //成色
        $('#sel_Fineness').combobox({
            valueField: 'fcodeName',
            textField: 'fcodeName',
            url: 'url'
        });

        //侦听流水号
        $('#sel_PPID').textbox('textbox').bind('keyup', function (e) {
            if (e.keyCode == 13) {
                var row = $('#l_tabGrid').datagrid('getSelected');
                if (row) {
                    var ppid = $('#sel_PPID').textbox("getValue");
                    if (ppid == null || ppid == '') {
                        RDateInitNoEdit();
                        return
                    }
                    //1.如果查询语句返回值为空,提醒流水号不存在,重新定位到流水号扫描界面
                    //2.如果FSTA = 3, 提示已经做过检测, 是否要重新做 ? 如果选是,则Q列的累加值标识成无需累加状态,编辑该贸易屏记录,清空所有控件 ;如果选否,重新定位到流水号扫描界面;
                    //3最后判定如果FSTA <> 2, 提醒状态不对;
                    //4.查到记录,可编辑该贸易屏记录,清空所有控件。
                    //5.如果贸易屏为可编辑的,记录FID = 贸易屏ID,否则FID = 0
                    $.get('url?ppid=' + ppid, function (data) {
                        if (data != null) {
                            checkId = data.id;
                            fsta = data.fsta;
                            if (fsta == 3) {
                                $.messager.confirm('消息确认', '已经做过检测,是否需要重新做?', function (r) {
                                    if (r) {
                                        RDateInitEdit();
                                    } else { RDateInitNoEdit(); }
                                });
                            }
                            else if (fsta == 2) {
                                RDateInitEdit()
                            }
                            else {
                                RDateInitNoEdit();
                                $.messager.alert('消息提醒', "数据状态不对!", 'info');
                            }
                        } else {
                            RDateInitNoEdit();
                            $.messager.alert('消息提醒', '流水号不存在!', 'info');
                        }
                    })

                } else {
                    $.messager.alert('消息提醒', '请选择左侧待选RMA数据项!', 'info');
                    return;
                }
            }
        });

        //初始化LeftDateGrid
        $('#l_search').trigger('click');
    });