前端（EasyUI -1.4.1）躺坑之旅

最新推荐文章于 2024-02-21 17:02:35 发布

化蝶飞舞

最新推荐文章于 2024-02-21 17:02:35 发布

阅读量428

点赞数

分类专栏：前端文章标签： jquery html javascript

本文链接：https://blog.csdn.net/yangyiping525/article/details/106586723

版权

本文记录了前端开发者在使用EasyUI框架时遇到的一些问题和解决方案，包括DataGrid组件的刷新、ComBox异步加载数据、combotree的多选限制、提示消息框的实现以及DataGrid的单元格事件和动态操作等。通过实例和代码片段，分享了在实际操作中可能遇到的坑和解决方法。

摘要由CSDN通过智能技术生成

作为一个蹩脚前端，已经接触过一段时间EasyUI了，这个框架其实很老了，基本都是一些原生JS操作。我也只能一葫芦画瓢了，有些前端的原理其实并不是那么的理解，但是一般来说基本还是能搞定的，百度下，copy下。这边就记录下一些坑，以便日后查看，也有个借鉴。

DataGrid 组件

定义 表 ：<table id="id" style="width: auto; height: 100%"></table>  

工具栏定义  <div id="toolbar_id" style="padding: 2px 2px; position: relative;"></div>

$("#id").datagrid({   //指定ID
                method : 'post',    ---  请求方式
                url : 'xxxx',       -- 路径
                fitColumns : false, 
                border : true,
                pagination : true,
                idField : 'noticeId',
                pageSize : 30,
                pageList : [ 30, 40, 50, 60, 70 ],
                rownumbers : true,
                singleSelect : true,
                collapsible : true,
                striped : true,
                remoteSort : true,
                queryParams : {  -- 默认请求参数
                    xxx: xx,
                    yyy : yy
                },
               view:detailview,
		       detailFormatter:function(index,row){
               return '<div style="padding:2px"><table id="ddv-' + index + '"></table> 
                </div>';
               },
                onLoadSuccess:  function,  -- 请求成功之后
                toolbar : '#toolbar_id', -- 工具栏
                frozenColumns : [ [ {
                    title : '字段描述',   -- 描述
                    field : 'xxx',
                    hidden : true,
                    width : 120,
                    align : 'center',
                    halign : 'center',
                    sortable : true
                    },
                    ...
                    ]]

})；
//1、动态修改URL
var op = $("#id").datagrid("options");//获取 option设置对象
 op.url = url;
// 重新加载 带参数parms{a:a,b:b}
$('#id').datagrid('reload', parms); 
//2、动态修改字段 colums =[[{..}]];
$("#id").datagrid({columns:colums});

ComBox组件异步请求加载数据

<input id="id" class="easyui-combobox" style="width:80px;"  data-options="editable:false ;panelHeight:'auto'" 
  /> 
var data; // 异步请求
$.ajax({    
		method:'get',
        url:'xxx',    
        dataType : 'json',    
        type : 'POST',    
        async:false,  
        success: function (data){    
        	data = data;  
        }    
  	}); 

$("#id").combobox({
		prompt:'输入关键字后自动搜索',
		method:'get&#