easyui踩坑

已于 2023-12-06 14:46:31 修改
阅读量1.5k 收藏
点赞数
文章标签： easyui javascript ecmascript
于 2021-12-13 16:42:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wayhb/article/details/121908701
版权

easyui中获取界面值方法

  • easyui textbox 实际是是input，在生成input时候生成了3个input，原input被隐藏，原input只有长度被显示的input继承，另外还有一个input是隐藏的，用于记录存储值。
// easyui textbox在外层包裹div才能有效绝对定位
<div style="position:absolute;left:21px;top:82px;">
    /*原始input被隐藏*/
    <input id="SKDBedit1" class="easyui-textbox textbox-f" type="text" tabindex="1" style="width: 121px; display: none;" dataset="DsMain" field="bm" d="uf_selectbm()" c="" k="uf_selectbm()">
    /*easyui生成的包裹标签*/
    <span class="textbox" style="width: 119.182px;">
    /*显示input，用于显示在界面，getText是获取的显示值*/
    <input id="_easyui_textbox_input2" type="text" class="textbox-text validatebox-text textbox-prompt" autocomplete="off" tabindex="1" placeholder="" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 111.182px;">
    /*被隐藏，用于存储值，getValue是获取的这里的值*/
    <input type="hidden" class="textbox-value" value="存储值">
    </span>

</div>

在easyui-textbox中，getValue以及通过ID.value获取的是存储值，需要焦点离开input才能获取
getText是获取的显示值,焦点不离开时获取的值

$('#tb').textbox('getText');//显示值
$('#tb').textbox('getValue'); == SKDBedit1.value//存储值
  • easyui datagrid中每个可以编辑单元格的input和textbox类似，下面是比较粗暴的使用jquery直接获取值【仅供参考】：
var td=$('.datagrid-view .datagrid-view2 .datagrid-body [field="phone"]')[index];
    var val=$(td).find('span input:first').val();
    var rows=table_main.datagrid('getRows');
    var arr=new Array();
    for (var i = 0; i < rows.length; i++) {
        if(i!=index && trim(rows[i].phone)!=''){
           arr[i]=trim(rows[i].phone); 
        }
    }
    arr.push(val);
    var cf=f_is_cf(arr);
    if(cf.length!=0){
        $.messager.alert('系统提示','出现重复手机号：'+cf,'error');
        return false;
    }

easyui中整数排序问题

参考:https://www.cnblogs.com/TimBing/p/3639525.html

var _760=col.sorter||function(a,b){
    return a==b?0:(a>b?1:-1);
};

替换成

var _760=col.sorter||function(a,b){
    if(parseFloat(a)) a = parseFloat(a);
    if(parseFloat(b)) b = parseFloat(b);
    return a==b?0:(a>b?1:-1);
};
  • 改动主要用于判读是否整数，源代码全部按照字符串处理，所以造成整数排序错误

datagrid分页

参考：https://www.cnblogs.com/futai/p/6033255.html

  • 自带分页计算方式
$page=$_REQUEST['page']?$_REQUEST['page']:1;//当前第几页
$rows=$_REQUEST['rows']?$_REQUEST['rows']:10;//每页显示的记录数
$v_begin=($page-1)*$rows+1;//开始条数
$v_end=$v_begin+$rows-1;//结束条数

iframe方式整合easyui

<!--panel_2-->
<div class="easyui-panel panel_2" title="方案编写"     
        style="width:100%;height:65%;padding:0px;background:#fafafa;"   
        data-options="collapsible:true,maximizable:true,maximized:true">   
<div id="" class="easyui-tabs" title="审核面板"  data-options="fit:true,border:false">
    <div title="抬头SQL" style="padding:0px;display:none;background:#EEE9E9;">
        <!--<iframe src="_codemirror_sql.html" id="iframe" style="width:100%;height:100%;"></iframe>-->
        <!--<iframe src="" class="iframe_codemirror" style="width:100%;height:99%;" frameborder=0 border=0></iframe>-->
    </div>
    <div title="明细SQL" style="padding:0px;display:none;background:#EEE9E9;">
        <!--<iframe src="https://www.soft-xnsk.com/k/index.php?editor/edit#filename=D%3A%2FphpStudy%2FWWW%2Fdingding%2Fddhtml_sm%2FCKIMG%2FSMConsole%2F_sksh.html" class="" style="width:100%;height:100%;" frameborder=0 border=0></iframe>-->
        
    </div>
    <div title="抬头反SQL" style="padding:0px;display:none;background:#EEE9E9;"></div>
    <div title="明细反SQL" style="padding:0px;display:none;background:#EEE9E9;">
        <!--<iframe src="_codemirror_sql.html" id="iframe" style="width:100%;" οnlοad="this.height = this.contentDocument.documentElement.scrollHeight + 'px'"></iframe>-->
    </div>
</div>
</div>

单元格赋值

  • easyui的值包含两部分：datagrid-view上显示的值，field存储的值，endedit后可以把field值更新到datagrid-view上面，但是直接显示需要使用jquery去手动赋值
//这里是表格内嵌的combogrid的onchange事件
onChange:function(newValue, oldValue){
    var g = $(this).combogrid('grid');	// 获取数据表格对象
    var r = g.datagrid('getSelected');	// 获取选择的行
    var row_index=table_main.datagrid('getRowNum');//获取主表格行号（扩展函数）
    <!--console.log(row_index);-->
    if (r) {
        var fieldName='position';
        var value=r.position;//设置单元格值（存储的值，不显示）
        var index=(row_index-1);
        var grid=table_main;
        EasyUIDataGrid.setFieldValue(fieldName, value, index, grid);（自定义函数）
    }
    
}
<!--扩展一个获取行号函数-->
$.extend($.fn.datagrid.methods, {
	getRowNum:function(jq){
		var opts=$.data(jq[0],"datagrid").options;
		var array = new Array();
		opts.finder.getTr(jq[0],"","selected",1).each(function(){
			array.push($(this).find("td.datagrid-td-rownumber").text());
		});
		return array.join(",");
	}
});

// 设置单元格值
// easyui datagrid 单元格赋值 https://blog.youkuaiyun.com/gt15886435708/article/details/78767798
var EasyUIDataGrid = {
    //设置列的值(适用于所有列)
    setFieldValue: function(fieldName, value, index, grid) {
        if (grid == undefined || grid == '') {
            grid = $('.table_main');
        }
        if (index == undefined || index == '') {
            index==0;
        }
        var row = grid.datagrid('getRows')[index];
        if (row != null) {
            var editor = grid.datagrid('getEditor', {
                index: index,
                field: fieldName
            });
            if (editor != null) {
                this.setValueToEditor(editor, value);
            } else {
                var view = $('.datagrid-view');
                for (var i = 0; i < view.length; i++) {
                    if ($(view[i]).children(grid.selector).length > 0) {
                        var view = $(view[i]).children('.datagrid-view2');
                        var td = $(view).find('.datagrid-body td[field="' + fieldName + '"]')[index]
                        var div = $(td).find('div')[0];
                        $(div).text(value);
                    }
                }
                row[fieldName] = value;
            }
            // grid.datagrid('clearSelections');//取消所有行选择
        }
    },
    //设置datagrid的编辑器的值
    setValueToEditor: function(editor, value) {
        switch (editor.type) {
            case "combobox":
                editor.target.combobox("setValue", value);
                break;
            case "combotree":
                editor.target.combotree("setValue", value);
                break;
            case "textbox":
                editor.target.textbox("setValue", value);
                break;
            case "numberbox":
                editor.target.numberbox("setValue", value);
                break;
            case "datebox":
                editor.target.datebox("setValue", value);
                break;
            case "datetimebox":
                editor.target.datebox("setValue", value);
                break;
            default:
                editor.html = value;
                break;
        }
    }
}

combogrid表格联动附值

//combogrid的改变事件中找到当前行联动赋值给其他字段，字段值显示和字段存储值都要赋值，才能正确
onChange:function(newValue, oldValue){//设置联动数据
    var g = $(this).combogrid('grid');	// 获取数据表格对象
    var r = g.datagrid('getSelected');	// 获取选择的行
    var row_index=table_main.datagrid('getRowNum');
    console.log('onChange行号：'+row_index);
    if (r) {
        var grid=table_main;
        EasyUIDataGrid.setFieldValue('bm', r.bm, row_index-1, grid);
        EasyUIDataGrid.setFieldValue('duifbsh', r.duifbsh, row_index-1, grid);
        EasyUIDataGrid.setFieldValue('duifname', r.duifname, row_index-1, grid);
    }
}
}
<!--或者使用easyui提供的方法更好-->
$('#_skdesigncx_table_pro').datagrid('updateRow',{//联动可以直接更新
        index:2,
        row:{value:row.chnname}
    });

清空表格值

$('#_skdesigncx_table_pro').propertygrid('loadData',{ total: 0, rows: [] });//清空属性表格
EasyUI-input取/赋值
私信可回答各种问题~
03-21 1055
EasyUI-input取/赋值
EasyUi
weixin_43710113的博客
06-11 402
1.什么是EasyUI EasyUI是基于jQuery的用户界面插件集合体。 EasyUI的目标就是帮助Web开发者轻松的打造出功能丰富、且美观的UI界面。开发者不需要编写复杂的JavaScript脚本，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 2.EasyUI组成部分 EasyUI下载后解压，其组成部分有： 文件/文件夹 说明 demo Ea...
easyui datagrid表格中设置combogrid 下拉框在编辑状态中点击失去焦点的解决方法
最新发布
xx_Anna的博客
02-28 122
【代码】easyui datagrid表格中设置combogrid 下拉框在编辑状态中点击失去焦点的解决方法。
easyui
xindeyitia的博客
01-21 163
[code="javascript"] $(function(){ var pageCount=${pageBean.count}//总条数 var pageSize=${pageBean.pageSize}//每页条数 var pageNumber=${pageBean.pageNum}//当前页数 $("#pp").pagination({ total...
easyui踩坑二：单页面前端使用window组件问题
qbqdjj的博客
05-28 487
接上篇： easyui踩坑一：window组件使用ajax要小心 问题出现环境： 前后端分离，后端只提供数据，不参与组织页面展示 单页面前端，具体到案例是使用easyui的tabs组件按标签展示各种内容页，所有页面切换都通过增减tabs标签页ajax载入 问题现象及原因 easyui的windows组件初始化代码都在tabs标签页当中，如下 上图中点击新增按键会弹出一个window组件窗口，内容也是ajax载入，代码类似于 //html页面标签 <div id="travel_type">&
EasyUI的datagrid分页不显示数据的解决方法
qq_41702574的博客
11-01 1386
按照官网的datagrid的说明书填写好分页代码，url和json文件也设置好了，但就是不显示数据。原因可能是一个js函数没有调入，为避免大家踩坑。现分享该主要函数如下： datagrid的标签是表格id的“dg”。 <table id="dg" class="easyui-datagrid" style="width:98%;height:90%;" title="请输入条件查询" OnPageIndexChanged="DataGrid_Page" iconCls="icon-search.
easyui datagrid 自定义操作按钮 点击切换图标&checkbox加上提示框tooltip
weixin_42650749的博客
08-11 1156
easyui datagrid 自定义操作按钮 点击切换图标 &checkbox加上提示框tooltip一、自定义按钮 点击切换图标easyui datagrid添加按钮图片让按钮显示出来添加点击事件onclick点击jQuery的click实现点击一个图标只改变一个图标而不影响全局二、checkbox加上提示框toottip 一、自定义按钮 点击切换图标 先上图，这是我想实现的效果，可以点击某一个切换图标，也可以点击一个代表全部的按钮让所有图标切换。 未点击： 点击一个： 点击all: ea
bootstrap 多级table_Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法...
weixin_33268492的博客
01-12 965
今天设置了Bootstrap Table的复杂表头，设置了多级表头(两行列名)，但是只能显示第一级表头(第一行的列名)，第二级的表头被第一级的表头覆盖。但是我仿照其他网上的其他设置复杂表头例子都能正常显示，我的设置了多级表头怎么就不能正常展示呢？我真的十分郁闷，后经过思考和查找资料,需要在页面加上这么一段全局样式就好了。.fixed-table-header{height: auto;}可是Boo...
echarts异步数据加载MySQL_微信小程序 Echarts 异步数据更新
weixin_42364609的博客
02-23 388
微信小程序 Echarts 异步数据更新的练习，被坑了很多次，特作记录。作者：罗兵地址：https://www.cnblogs.com/hhh5460/p/9989805.html0、效果图 1、视图2、设置//index.json{"usingComponents": {"ec-canvas": "../../components/ec-canvas/ec-canv...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值