杰的个人博客

inCombobox、initCombobox例子

Tue, 27 May 2025 16:23:07 +0800

/**
 * 
 */
function addSelect(sStr,divId){
    var slect={
            selectName:sStr 
    }
    $.ajax({
        type :"post",
        url : "getSelect.action",
        data :  slect,
        dataType : "json",
        success : function(data) {
            var obj = JSON.parse(data);
            var htmlSelect =  "";
            $("#"+divId).append(htmlSelect);
            },
        error : function() {
            alert('加载失败');

        }
    });
}
function addSelectnotNull(sStr,divId){
    var slect={
            selectName:sStr 
    }
    $.ajax({
        type :"post",
        url : "getSelect.action",
        data :  slect,
        dataType : "json",
        success : function(data) {
            var obj = JSON.parse(data);
            var htmlSelect =  "";
            $("#"+divId).append(htmlSelect);
            },
        error : function() {
            alert('加载失败');

        }
    });
}
function testP(hd){
    console.log(JSON.stringify(hd))
}
function initCombobox(id,code,isX){
    $.ajax({
        type : "post",
        url : 'getSelect.action?selectName='+code,
        data :  {},
        dataType : "json",
        success : function(data) {
            var obj = JSON.parse(data);
            $('#'+id).combobox({
                data:obj,
                method:'post',
                panelHeight:200,//设置为固定高度，combobox出现竖直滚动条
                valueField:'selectValue',
                textField:'selectValue',
                multiple:true,
                formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
                   var opts = $(this).combobox('options');
                return '' + row[opts.textField]
                },
                onLoadSuccess: function () {  //下拉框数据加载成功调用
                    var opts = $(this).combobox('options');
                    var target = this;
                    var values = $(target).combobox('getValues');//获取选中的值的values
                    $.map(values, function (value) {
                        var el = opts.finder.getEl(target, value);
                        el.find('input.combobox-checkbox')._propAttr('checked', true); 
                    });
                },
                onSelect: function (row) { //选中一个选项时调用
                    var opts = $(this).combobox('options');
                    //获取选中的值的values
                    $("#"+id).val($(this).combobox('getValues'));

                    //设置选中值所对应的复选框为选中状态
                    var el = opts.finder.getEl(this, row[opts.valueField]);
                    el.find('input.combobox-checkbox')._propAttr('checked', true);
                },
                onUnselect: function (row) {//不选中一个选项时调用
                    var opts = $(this).combobox('options');
                    //获取选中的值的values
                    $("#"+id).val($(this).combobox('getValues'));

                    var el = opts.finder.getEl(this, row[opts.valueField]);
                    el.find('input.combobox-checkbox')._propAttr('checked', false);
                }
            });
            if(isX=='true'){
            $("#"+id).combobox('setValues', obj[0].selectValue)
            }
        },
        error : function() {
            alert("系统异常，请稍后重试！");
        }
    }); 

};
function inCombobox(id,code,isX){
    $.ajax({
        type : "post",
        url : 'getSelect.action?selectName='+code,
        data :  {},
        dataType : "json",
        success : function(data) {
            var obj = JSON.parse(data);
            var value = "";
            //加载下拉框复选框
            $('#'+id).combobox({
                data:obj,
                method:'post',
                panelHeight:200,//设置为固定高度，combobox出现竖直滚动条
                valueField:'selectValue',
                textField:'selectValue',
              });
            if(isX=='true'){
            $("#"+id).combobox('setValues', obj[0].selectValue)
            }
        },
        error : function() {
            alert("系统异常，请稍后重试！");
        }
    }); 

};
function inCombobox2(id,code,isX){
    $.ajax({
        type : "post",
        url : 'getSelect.action?selectName='+code,
        data :  {},
        dataType : "json",
        success : function(data) {
            var obj = JSON.parse(data);
            var value = "";
            //加载下拉框复选框
            $('#'+id).combobox({
                data:obj,
                method:'post',
                panelHeight:200,//设置为固定高度，combobox出现竖直滚动条
                valueField:'selectValue',
                textField:'selectText',
              });
            if(isX=='true'){
            $("#"+id).combobox('setValues', obj[0].selectValue)
            }
        },
        error : function() {
            alert("系统异常，请稍后重试！");
        }
    }); 

};
function inComboboxJSON(id,code,isX){
    $.ajax({
        type : "post",
        url : 'jsp/json/'+code+".json",
        data :  {},
        dataType : "json",
        success : function(data) {
            var value = "";
            //加载下拉框复选框
            $('#'+id).combobox({
                data:data,
                method:'post',
                panelHeight:200,//设置为固定高度，combobox出现竖直滚动条
                valueField:'selectValue',
                textField:'selectText',
              });
            if(isX=='true'){
            $("#"+id).combobox('setValues', data[0].selectValue)
            }
        },
        error : function() {
            alert("系统异常，请稍后重试！");
        }
    }); 

};

easyui下拉框代码块

Tue, 27 May 2025 16:21:50 +0800

下拉框设置
function inCombobox(id, url, valuefield,textfield) {
    $.ajaxSettings.async = false;
    $.ajax({
        type: "post",
        url: url,
        data: {},
        dataType: "json",
        success: function (data) {
            //var obj = JSON.parse(data);
            var value = "";
            //加载下拉框复选框
            $('#' + id).combobox({
                data: data.data.DT,
                method: 'post',
                panelHeight: 200,//设置为固定高度，combobox出现竖直滚动条
                valueField: valuefield,
                textField: textfield,
            });
        },
        error: function () {
            alert("系统异常，请稍后重试！");
        }
    });
    $.ajaxSettings.async = true;
}
$('#tano').combobox({
    onChange: function (newValue, oldValue) {
        SeachData_4043();
    }
});

复制代码

Tue, 27 May 2025 16:20:19 +0800

常复制的代码
1）设置easyui控件的背景色代码：$('#visitdate').datebox('textbox').css('background', '#E4FFC0')

2）C#项目前端快捷方式引用示例代码

function Base_UserLst1(Eventstr) {
EasyLib.Ctl.SearchTxt({
$CountValArr: [Eventstr],
$CountKeyArr: [$(".usercode1")],
$DomArr: [$(".usercode1"), $(".username1")],//需要绑定的文本框1
FieldArr: ["usercode", "username"],//文本框1得到的字段值
WinUrl: EasyLib.Url.GetRootPath(2) + "/Base/BaseCon/Page/20081?",
AjaxUrl: EasyLib.Url.GetRootPath(2) + "/SysAdmin/SysAdminCURD/GetSysAdminUser?formdbid=90000&usercode=",
});
}

3)$.messager.confirm('提示框', '你确定要删除吗?',function(){}) easyui确定提示框

4)$.messager.prompt('生产排程号', '为了更好的鉴定你每一次导入的订单号，要求导入、输入独特的排产号', function (r) {
if (r) {
alert('生产排程号:' + r);
}
});
var curscheid = EasyLib.Cookies.Get("SWT_usercodeCN") + EasyLib.Date.Get();
$(".messager-input").val(curscheid)

5)防止非数字字符输入 onkeyup="this.value=this.value.replace(/[^\d]/g,'')"

表格初始化函数
initdatahd(tableid, url, height, checkrowed, selectrowed, sumfields, sort, order)；
initdatadt(tableid, url, params, height, pageLists, sort, order, checkrowed, selectrowed, IsSelectyn)；
initdetaildata(tableid, url, params, height, selectyn, pageLists, checkrowed, selectrowed,sort, order)；
//绑定数据换行
initdataRow(tableid, url, height,pagelists, selectyn, checkrowed, selectrowed, sumfields, sort, order)；
//绑定数据hd
function initdata(tableid, url, height, pagelist, params, selectyn, sumfields, groupfields, sort, order, checkrowed, selectrowed,onclickrow)；
下拉列表设置
function inCombobox(id, url, valuefield,textfield) {
$.ajaxSettings.async = false;
$.ajax({
type: "post",
url: url,
data: {},
dataType: "json",
success: function (data) {
//var obj = JSON.parse(data);
var value = "";
//加载下拉框复选框
$('#' + id).combobox({
data: data.data.DT,
method: 'post',
panelHeight: 200,//设置为固定高度，combobox出现竖直滚动条
valueField: valuefield,
textField: textfield,
});
},
error: function () {
alert("系统异常，请稍后重试！");
}
});
$.ajaxSettings.async = true;
}
$('#tano').combobox({
onChange: function (newValue, oldValue) {
SeachData_4043();
}
});
easyui 设置表头过长字段换行
.datagrid-header-row .datagrid-cell span {
white-space: normal !important;
word-wrap: normal !important;
}

easyui表格属性设置

Tue, 27 May 2025 16:18:07 +0800

表格设置冻结列：


表格头设置表格属性自动换行
data-options="nowrap:false"
前端页面对json数据分页并显示eaui表格：
$('#datas').datagrid({
    loadFilter:pagerFilter,
    pageSize:100,
    height:parent.$("#indexx-Tab").height()-$("#headtitle").height()-80,
    pageList:[100,50,30,20,10,1000],
}).datagrid('loadData', obj);
easyui 设置表头过长字段换行
.datagrid-header-row .datagrid-cell span {
    white-space: normal !important;
    word-wrap: normal !important;
}

layer弹窗

Tue, 27 May 2025 16:17:21 +0800

function ListOcostCenter() {
layer.open({
type : 2,
title : "部门列表",
area : [ "80%", "85%" ],
content : "jsp/ListOcostCenter.jsp",
end : function() {
}
});

};

input输入框防止非数字字符输入

Tue, 27 May 2025 16:15:42 +0800

防止非数字字符输入 onkeyup="this.value=this.value.replace(/[^\d]/g,'')"

tableAuto.js设置easyui表格列按下拉列表勾选状态动态现象

Tue, 27 May 2025 16:12:45 +0800

/**
 * 
 */
function tableAuto(a,b){
        var obj = GetFrozeData('#'+b,'');
        initComboboxTableFiled(a,obj,b)

    }
var GetFrozeData = function (gridStr, isFroze) {
     //获取所有未冻结列数据
     var cols = $(gridStr).datagrid('getColumnFields', isFroze);
     var array = [];
     for (var i =0;i< cols.length;i++) {     
         //获取每一列的列名对象
         var col = $(gridStr).datagrid("getColumnOption", cols[i]);
         //声明对象
         var obj = new Object();
         obj["value"] = cols[i];
         obj["text"] = col.title.trim();
         if(col.hidden==true){
            obj["select"]=false;
         }else{
            obj["select"]=true;
         }
         //追加对象
         array.push(obj);
     }   
     return array;
 }
function initComboboxTableFiled(id,obj,tableid){
    var ckstr = [];
    for(var i =0;i' + row[opts.textField]
        },
        onLoadSuccess: function () {  //下拉框数据加载成功调用
            var opts = $(this).combobox('options');
            var target = this;
            var values = $(target).combobox('getValues');//获取选中的值的values
            $.map(values, function (value) {
                var el = opts.finder.getEl(target, value);
                el.find('input.combobox-checkbox')._propAttr('checked', true); 
            });
        },
        onSelect: function (row) { //选中一个选项时调用
            var opts = $(this).combobox('options');
            //获取选中的值的values
            $("#"+id).val($(this).combobox('getValues'));

            //设置选中值所对应的复选框为选中状态
            var el = opts.finder.getEl(this, row[opts.valueField]);
            el.find('input.combobox-checkbox')._propAttr('checked', true);
            $('#'+tableid).datagrid('showColumn',row.value);//showColumn,hideColumn
        },
        onUnselect: function (row) {//不选中一个选项时调用
            var opts = $(this).combobox('options');
            //获取选中的值的values
            $("#"+id).val($(this).combobox('getValues'));

            var el = opts.finder.getEl(this, row[opts.valueField]);
            el.find('input.combobox-checkbox')._propAttr('checked', false);
            $('#'+tableid).datagrid('hideColumn',row.value);//showColumn,hideColumn
        }
    }); 

};

easyui下拉列表代码块

Tue, 27 May 2025 16:07:23 +0800

easyui加载表格：
$('#dg').datagrid({
    url: 'datagrid_data1.json',
    method: 'get',
    title: 'Context Menu on DataGrid',
    iconCls: 'icon-save',
    width: 700,
    height: 250,
    fitColumns: true,
    singleSelect: true,
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:120},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:250},
        {field:'status',title:'Status',width:60,align:'center'}
    ]],
    onHeaderContextMenu: function(e, field){
        e.preventDefault();
        if (!cmenu){
            createColumnMenu();
        }
        cmenu.menu('show', {
            left:e.pageX,
            top:e.pageY
        });
    }
});
easyui加载下拉表格
$.ajax({
    type : "post",
    url : 'getAllServer.action',
    data :  {},
    dataType : "json",
    success : function(data) {
        var obj = JSON.parse(data);
        var value = "";
         $('#serverid').combogrid({
                panelWidth:450,
                //value:'006',
                idField:'id',
                textField:'name',
                data:obj,
                //url:'datagrid_data.json',
                columns:[[
                {field:'id',title:'id',width:60},
                {field:'name',title:'别名',width:100},
                ]]
                });

    },
    error : function() {
        alert("系统异常，请稍后重试！");
    }
});
$('#serverid').combogrid({  
  onChange: function (newValue, oldValue) {  
      $.ajax({
            url : "upserverId.action?serverId="+newValue, // 后台地址
            type : "post",
            dataType : "json",
            data : {}, //自己需要传递的数据 {}
            success : function(data) {
                var obj = JSON.parse(data);
                //parent.$("#doortxt").html(obj.name)
                alert(obj.info)
                parent.dg.cancel();
            },
            error : function() {

            }
        }); 
  }  
});

easyui行编辑单元格上下左右移动

Tue, 27 May 2025 16:03:07 +0800

JS实现：

//键盘控制
$.extend($.fn.datagrid.methods, {
    keyCtr: function(jq) {
        return jq.each(function() {
            var grid = $(this);
            grid.datagrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown',
            function(e) {
                if (SampleInfo.editorIndex == -1) {
                    return;
                }
                var keyCode = e.keyCode;
                //当键盘按下键为左右键时,把网格键盘按下的事件默认动作去除,要不然会影响按左右键选择文本框值             
                if (keyCode == 37 || keyCode == 39) {
                    e.preventDefault();
                    e.stopPropagation();
                }
                rows = $dg.datagrid('getRows');
                if (SampleInfo.editorField == '') {
                    SampleInfo.editorField = 'formalStyleNo';
                }
                switch (keyCode) {
                case 38:
                    // up                 
                    var editors = grid.datagrid('getEditors', SampleInfo.editorIndex);
                    if (editors) {
                        if (rows.length > SampleInfo.editorIndex && SampleInfo.editorIndex >= 1) {
                            SampleInfo.editorIndex--;
                        } else {
                            SampleInfo.editorIndex = rows.length - 1;
                        }
                        grid.datagrid('beginEdit', SampleInfo.editorIndex);
                        //单元格聚焦             
                        var ed = grid.datagrid('getEditor', {
                            index: SampleInfo.editorIndex,
                            field: SampleInfo.editorField
                        });
                        if (ed != null && ed != "") {
                            $(ed.target).focus();
                            $(ed.target).select();
                        }
                    } else {}
                    break;
                case 40:
                    // down              
                    var editors = grid.datagrid('getEditors', SampleInfo.editorIndex);
                    if (editors) {
                        if (rows.length - 1 > SampleInfo.editorIndex) {
                            SampleInfo.editorIndex++;
                        } else {
                            SampleInfo.editorIndex = 0;
                        }
                        grid.datagrid('beginEdit', SampleInfo.editorIndex);
                        //单元格聚焦                
                        var ed = grid.datagrid('getEditor', {
                            index: SampleInfo.editorIndex,
                            field: SampleInfo.editorField
                        });
                        if (ed != null && ed != "") {
                            $(ed.target).focus();
                            $(ed.target).select();
                        }
                    }
                    break;
                case 37:
                    // left                
                    var editors = grid.datagrid('getEditors', SampleInfo.editorIndex);
                    if (editors) {
                        if (rows.length - 1 > SampleInfo.editorIndex) {
                            SampleInfo.editorIndex++;
                        } else {
                            SampleInfo.editorIndex = 0;
                        }
                        grid.datagrid('beginEdit', SampleInfo.editorIndex);
                        //单元格聚焦           
                        if (SampleInfo.editorField == 'formalStyleNo') {
                            SampleInfo.editorField = 'formalCategoryNo';
                        } else if (SampleInfo.editorField == 'formalColorNo') {
                            SampleInfo.editorField = 'formalStyleNo';
                        } else if (SampleInfo.editorField == 'formalCategoryNo') {
                            SampleInfo.editorField = 'formalColorNo';
                        }
                        var ed = grid.datagrid('getEditor', {
                            index: SampleInfo.editorIndex,
                            field: SampleInfo.editorField
                        });
                        if (ed != null && ed != "") {
                            $(ed.target).focus();
                            $(ed.target).select();
                        }
                    }
                    break;
                case 39:
                    // right                
                    var editors = grid.datagrid('getEditors', SampleInfo.editorIndex);
                    if (editors) {
                        if (rows.length - 1 > SampleInfo.editorIndex) {
                            SampleInfo.editorIndex++;
                        } else {
                            SampleInfo.editorIndex = 0;
                        }
                        grid.datagrid('beginEdit', SampleInfo.editorIndex);
                        //单元格聚焦                     
                        if (SampleInfo.editorField == 'formalStyleNo') {
                            SampleInfo.editorField = 'formalCategoryNo';
                        } else if (SampleInfo.editorField == 'formalColorNo') {
                            SampleInfo.editorField = 'formalStyleNo';
                        } else if (SampleInfo.editorField == 'formalCategoryNo') {
                            SampleInfo.editorField = 'formalColorNo';
                        }
                        var ed = grid.datagrid('getEditor', {
                            index: SampleInfo.editorIndex,
                            field: SampleInfo.editorField
                        });
                        if (ed != null && ed != "") {
                            $(ed.target).focus();
                            $(ed.target).select();
                        }
                    }
                    break;
                case 13:
                    // enter键                
                    removeDataGridCommon(itemStyle.dataGridItemStyle);
                    itemStyle.dealItemStyleProc();
                    break;
                case 113:
                    //F2保存键            
                    parent.operaItemStyleInsert();
                    var c = parent.billOrder.ItemStylePanel;
                    c.panel('close', true);
                }
            });
        });
    }
})

调用：

class="easyui-datagrid move-edittable"

$("#bt1").datagrid("keyCtr");

postionstr = " col-row='1-" + index + "'"
classstr = classstr + " col-row1-" + index;

easyui加载数据

Tue, 27 May 2025 16:01:57 +0800

$('#dg').datagrid({loadFilter:pagerFilter,pageList:[100,10,20,30,50],pageSize:30, rowStyler:function(index,row){
                if (row.chkYn!='1'&&row.chkYn!=2){
                    return 'background-color:white;color:red;font-weight:bold;';
                }
            }}).datagrid('loadData', []);