首页 > 代码库 > esayUI实践的一些体会

esayUI实践的一些体会

2024-08-13 06:39:36   219人阅读

1.如何在页面中使用 easy ui ？

引入 四个文件

 

<!-- 引入easy ui -->

<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">

 

<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/${pageContext.request.contextPath}/js/easyui/themes/icon.css">

 

<script type="text/javascript" src="http://www.mamicode.com/${pageContext.request.contextPath}/js/easyui/jquery-1.8.3.js"></script>

 

<script type="text/javascript"

src="http://www.mamicode.com/${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>

2、 学习使用easy ui 布局功能

layout 布局控件使用

将 body、div 分成东西南北中，五个部分

<body class="easyui-layout">

    <!-- 布局，将body分为 东西南北中 五个部分  -->

    <div region="north"  style="height: 100px" title="北部面板">北部</div>

    <div data-options="region:‘south‘,title:‘南部面板‘" style="height: 100px">南部</div>

    <div data-options="region:‘west‘,title:‘西部面板‘"  style="width: 100px">西部</div>

    <div data-options="region:‘east‘,title:‘东部面板‘" style="width: 100px">东部</div>

    <div data-options="region:‘center‘,title:‘中部面板‘">中部</div>

</body>

 

注意，只有center区域的必须的

 

3、 可折叠菜单  accordion 布局

 

<!-- 使用可折叠菜单  -->

       <!-- 如果子div占满父容器 fit=true -->

       <div class="easyui-accordion" data-options="fit:true">

           <!-- 折叠菜单 都要提供 title -->

           <div data-options="title:‘基本菜单‘">aa</div>

           <div data-options="title:‘系统菜单‘">bb</div>

       </div>

 

通过 iconCls:‘icon-help‘ 指定图标 （必须引入 icon.css文件 ）

4、 选项卡布局  tabs 布局

 

closable为true , 选项卡可以被关闭

<!-- 使用选项卡布局  -->

       <!-- 每个选项卡 必须提供 title  -->

       <div class="easyui-tabs" data-options="fit:true">

           <div data-options="title:‘选项卡一‘">选项卡一</div>

           <div data-options="title:‘选项卡二‘,closable:true">选项卡二</div>

           <div data-options="title:‘选项卡三‘">选项卡三</div>

       </div>

 

 

 

ztree

主页菜单栏 树形菜单 生成

树形结构菜单，通常使用 js 类库制作的 

bos 菜单树，使用ztree 制作的

 

1、zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

 

开发使用 ztree 3.5 (jquery 插件 )

 

api 文档

css 样式表

demo 案例

js 核心类库

 

今天目标： 简单树两种方式 （标准数据 和 简单数据 ）

导入 jquery.ztree.all-3.5.js 、 zTreeStyle.css （依赖 img 图标文件夹）

 

<script type="text/javascript"

src="http://www.mamicode.com/${pageContext.request.contextPath}/js/easyui/jquery-1.8.3.js"></script>

 

<!-- 引入 ztree 文件  -->

<link rel="stylesheet"

type="text/css" href="http://www.mamicode.com/${pageContext.request.contextPath}/js/ztree/zTreeStyle.css">

<script type="text/javascript"

src="http://www.mamicode.com/${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>

 

2、在accordion折叠菜单中， 编写树形菜单

 

StandardData 标准树

SimpleData 简单树

 

第一种： 标准数据

第一步： 在页面生成树 地方，提供 <ul> 标签

<!-- 标准数据 制作 ztree -->

<ul id="basicTree" class="ztree"></ul>

 

第二步： setting 、数据。初始化

// 初始化 标准数据 树

       // 1 、setting

       var setting = {};

      

       // 2、数据

       var zNodes = [

           {

              name:‘菜单1‘,

              children : [

                {name:‘菜单11‘},

                {name:‘菜单12‘}

              ]

           },

           {name:‘菜单2‘}

        ];

      

       // 3、 生成树

       $.fn.zTree.init($("#basicTree"), setting, zNodes);

 

第二种： 简单数据

第一步 ：在生成树位置，提供 <ul>标签

<!-- 简单数据 制作ztree -->

<ul id="simpleTree" class="ztree"></ul>

第二步： setting 、数据、初始化

 

// 初始化 简单数据 树

       // 1、setting

       var setting = {

           data : {

              simpleData : {

                  enable : true // 开启简单数据模式

              }

           }  

       };

          

       // 2、数据

       var zNodes = [ // 每个元素 都要有 id 和 pId

           {id:1, pId:0 ,name:‘菜单1‘},

           {id:2, pId:0 ,name:‘菜单2‘},

           {id:11, pId:1 ,name:‘菜单11‘}, // 是id为1菜单子节点

           {id:12, pId:1 ,name:‘菜单12‘},

           {id:121, pId:12 ,name:‘菜单121‘}

       ]

      

       // 3、初始化树

       $.fn.zTree.init($("#simpleTree"), setting, zNodes);

 

为树上每个节点，添加点击事件

var setting = {

           callback : {

              onClick : function(event, treeId, treeNode, clickFlag){

                  alert("点我了！！！");

              }

           }  

};

 

编写新增选项卡，和点击切换代码

callback : {

              onClick : function(event, treeId, treeNode, clickFlag){

                  // 点击菜单，在选项卡 布局中，添加tab

                  // 通过 treeNode 获得树节点数据

                  // 判断当前选项卡是否存在，如果存在，不添加，切换

                  if($("#mytabs").tabs(‘exists‘,treeNode.name)){

                     // 存在 ，切换

                     $("#mytabs").tabs(‘select‘,treeNode.name);

                  }else{

                     // 不存在

                     $("#mytabs").tabs(‘add‘,{

                         title : treeNode.name,

                         content : treeNode.name,

                         closable: true

                     });

                  }

              }

           }  

 

问题： 如何保证每个选项卡 可以单独刷新

在tabs 选项卡 中嵌入一个 iframe

$("#mytabs").tabs(‘add‘,{

                         title : treeNode.name,

                         content : "<iframe src=http://www.mamicode.com/‘http://www.baidu.com‘ style=‘width:100%;height:100%;border:0;‘></iframe>",

                         closable: true

                     });

 

ztree提交checkbox信息技巧：

if ($("#roleForm").form(‘validate‘)) {

                            var treeObj = $.fn.zTree.getZTreeObj("functionTree");

                            var nodes = treeObj.getCheckedNodes(true);

                            var parentIds=[];

                            for ( var i = 0; i < nodes.length; i++) {

                                   parentIds.push(nodes[i].id);

                            }

                            $("#parentIds").val(parentIds.join(","));

                            $("#roleForm").submit();

                           

                     } else {

                     }

 

easyUI

消息提示窗口，使用 easy ui 的messager 控件

$.messager.show  右下角消息框

$.messager.alert 弹出框

$.messager.confirm 确认框

// 退出登录

       function logoutFun() {

              $.messager

              .confirm(‘系统提示‘,‘您确定要退出本次登录吗?‘,function(isConfirm) {

                     if (isConfirm) {

                            // 退出时，清除Session

                            location.href = http://www.mamicode.com/‘${pageContext.request.contextPath }/invalidate.jsp‘; // 清除[w1] Session

                     }

              });

       }

 

$.messager.prompt 输入框

$.messager.progress 进度

 

 

easyUI的ext属性portal

第一步，建立两个div

<div id="layout_portal_portal" style="position:relative;height:600px;">

              <div></div>

              <div></div>

       </div>

第二部

panels = [ {

                     id : ‘p1‘,

                     title : ‘公共栏‘,

                     height : 255,

                     collapsible : true,

                     href:‘page_portal_gonggao.action‘

              }, {

                     id : ‘p2‘,

                     title : ‘代办事宜‘,

                     height : 255,

                     collapsible : true,

                     href:‘page_portal_daiban.action‘

              }, {

                     id : ‘p3‘,

                     title : ‘预警信息‘,

                     height : 255,

                     collapsible : true,

                     href:‘page_portal_yujing.action‘

              }, {

                     id : ‘p4‘,

                     title : ‘系统BUG反馈‘,

                     height : 255,

                     collapsible : true,

                     href:‘page_portal_bug.action‘

              }];

               $(‘#layout_portal_portal‘).portal({

                     border : false,

                     fit : true

               });

              var state = state = ‘p1,p2:p3,p4‘;/*冒号代表列，逗号代表行*/

 

              addPortalPanels(state);

              $(‘#layout_portal_portal‘).portal(‘resize‘);

外调函数

function getPanelOptions(id) {[w2] 

              for ( var i = 0; i < panels.length; i++) {

                     if (panels[i].id == id) {

                            return panels[i];

                     }

              }

              return undefined;

       }

       function getPortalState() {

              var aa=[];

              for(var columnIndex=0;columnIndex<2;columnIndex++) {

                     var cc=[];

                     var panels=$(‘#layout_portal_portal‘).portal(‘getPanels‘,columnIndex);

                     for(var i=0;i<panels.length;i++) {

                            cc.push(panels[i].attr(‘id‘));

                     }

                     aa.push(cc.join(‘,‘));

              }

              return aa.join(‘:‘);

       }

       function addPortalPanels(portalState) {

              var columns = portalState.split[w3] (‘:‘);

              for (var columnIndex = 0; columnIndex < columns.length; columnIndex++) {

                     var cc = columns[columnIndex].split[w4] (‘,‘);

                     for (var j = 0; j < cc.length; j++) {

                            var options = getPanelOptions(cc[j]);

                            if (options) {[w5] 

                                   var p = $(‘<div/>‘).attr(‘id‘, options.id).appendTo(‘body‘);

                                   p.panel(options);

                                   $(‘#layout_portal_portal‘).portal(‘add‘, {

                                          panel : p,

                                          columnIndex : columnIndex

                                   });

                            }

                     }

              }

       }

 

 

easyUI更换主题

第一步：建立div

<div style="position: absolute; right: 5px; bottom: 10px; ">

<a href="javascript:void(0);" class="easyui-menubutton"

              data-options="menu:‘#layout_north_pfMenu‘,iconCls:‘icon-ok‘">更换皮肤</a>

</div>

<div id="layout_north_pfMenu" style="width: 120px; display: none;">

                     <div onclick="changeTheme(‘default‘);">default</div>

                     <div onclick="changeTheme(‘gray‘);">gray</div>

                     <div onclick="changeTheme(‘black‘);">black</div>

                     <div onclick="changeTheme(‘bootstrap‘);">bootstrap</div>

                     <div onclick="changeTheme(‘metro‘);">metro</div>

              </div>

第二部：替换默认主题地址

changeTheme = function(themeName) {

              var $easyuiTheme = $(‘#easyuiTheme‘);

              var url = $easyuiTheme.attr(‘href‘);

              var href = http://www.mamicode.com/url.substring(0, url.indexOf(‘themes‘)) + ‘themes/‘

                            + themeName + ‘/easyui.css‘;

              $easyuiTheme.attr(‘href‘, href);

              var $iframe = $(‘iframe‘);[w6] 

              if ($iframe.length > 0) {

                     for ( var i = 0; i < $iframe.length; i++) {

                            var ifr = $iframe[i];

                            $(ifr).contents()[w7] .fin[w8] d(‘#easyuiTheme‘).attr(‘href‘, href);

                     }

              }

       };

 

 

easyUI弹出窗口

<div onclick="editPassword();">修改密码</div>

function editPassword[w9] () {

              $(‘#editPwdWindow‘).window(‘open‘);

       }

 

初始化函数里面（设置窗口属性）

$(‘#addStandardWindow‘).window({

            title: ‘添加收派标准‘,

            width: 400,

            modal: true,

            shadow: true,

            closed: true,

            height: 400,

            resizable:false

        });

             

   <div id="editPwdWindow" class="easyui-window" title="修改密码" collapsible="false" minimizable="false"

        maximizable="false" icon="icon-save"  style="width: 300px; height: 150px; padding: 5px;

        background: #fafafa">

        <div class="easyui-layout" fit="true">

            <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">

                <table cellpadding=3>

                    <tr>

                        <td>新密码：</td>

                        <td><input id="txtNewPass" type="Password" class="txt01" /></td>

                    </tr>

                    <tr>

                        <td>确认密码：</td>

                        <td><input id="txtRePass" type="Password" class="txt01" /></td>

                    </tr>

                </table>

            </div>

            <div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">

                <a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >确定</a>

                <a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a>

            </div>

        </div>[w10] 

    </div>

 

 

 

 

 

datagrid数据表格

第一步：创建div

<div region="center" border="false">

              <table id="grid"></table>

</div>

第二部：初始化

$(function() {

              // 初始化 datagrid

              // 创建grid

              $(‘#grid‘).datagrid({

                     iconCls : ‘icon-forward‘,

                     fit : true,

 

  1. 可在toolbar添加事件函数：

var toolbar = [ {

        id : ‘button-view‘,

        text : ‘查看‘,

        iconCls : ‘icon-search‘,

        handler : doView[w11] 

},

//定义冻结列[w12] 

var frozenColumns = [ [ {

        field : ‘id‘,[w13] 

        checkbox : true,[w14] 

        rowspan : 2

},

[w15] 

小技巧1

全选复选框，只会选中当前页面所有记录，不会选中其它页

获取选中行id

 

// 1、获得所有选中行 的 id

              var rows = $("#grid").datagrid(‘getSelections‘); // 每行js对象

              // 需要将 许多id 一起发送给我服务器 ，转换 字符串

              var ids = [];

              for(var i=0; i<rows.length ; i++){

                     ids.push(rows[i].id);// 将id加入数组

              }

              // 2、将这些id 发送服务器，服务器根据 id 删除

              $.post("${pageContext.request.contextPath}/standard_delete.action",{ids: ids.join(",")},function(data){

                    

       });

小技巧2：

function doDblClickRow(rowIndex, rowData){

              // rowIndex 行号

              // rowData 行数据

              // 将双击行数据，回显form表单中

              $(‘#name‘).val(rowData.name);

              // numberbox 不能直接用val 回显

              $(‘#minweight‘).numberbox(‘setValue‘, rowData.minweight);

              // 隐藏id

              $(‘#standardId‘).val(rowData.id);

             

              // 弹出窗口

              $(‘#addStandardWindow‘).window(‘open‘);

}

-----------------------------------------------------------------------------------------------------------------

小技巧3：

  // 重置form

       $(‘#standardForm‘).form(‘reset‘);

       // 对form 添加离焦事件

       $(‘#standardForm *‘).trigger(‘blur‘);

       // 刷新表格

              $(‘#grid‘).datagrid(‘reload‘);

小技巧4：将条件传入重新加载查询

$("#btn").click(function() {

                     var param = $(‘#searchForm‘).serializeJson();[w16]                   

                     $(‘#grid‘).datagrid(‘load‘,param);

                     // 查询数据后，关闭window

                     $(‘#searchWindow‘).window(‘close‘);

                     $(‘#searchForm‘).form(‘reset‘);

              });

----------------------------------------------------------------------------------------------------------------

将form表单转换成json格式的参数

$.fn.serializeJson=function(){ 

    var serializeObj={}; 

    var array=this.serializeArray(); 

    $(array).each(function(){ 

        if(serializeObj[this.name]){ 

            if($.isArray(serializeObj[this.name])){ 

                serializeObj[this.name].push(this.value); 

            }else{ 

                serializeObj[this.name]=[serializeObj[this.name],this.value]; 

            } 

        }else{ 

            serializeObj[this.name]=this.value;  

        } 

    }); 

    return serializeObj; 

};

==================================================================

编辑表格的一行：

l  function doDblClickRow(rowIndex, rowData) {

              //alert("双击表格数据...");

              console.info(rowIndex);

              $(‘#grid‘).datagrid(‘beginEdit‘, rowIndex);[w17] 

              editIndex = rowIndex;

       }

var editIndex;[w18] 

 

       function doAdd() {     //添加行

              if (editIndex != undefined) { //[w19] 

                     $("#grid").datagrid(‘endEdit‘, editIndex);

              }

              if (editIndex == undefined) { //[w20] 

                     //alert("快速添加电子单...");

                     $("#grid").datagrid(‘insertRow‘, {

                            index : 0,

                            row : {}

                     });

                     $("#grid").datagrid(‘beginEdit‘, 0); //[w21] 

                     editIndex = 0; //[w22] 

              }

       }

 

       function doSave() { //保存

              $("#grid").datagrid(‘endEdit‘, editIndex); //[w23] 

       }

 

       function doCancel() { //取消

              if (editIndex != undefined) {

                     $("#grid").datagrid(‘cancelEdit‘, editIndex);

                     if (isEmptyObject($("#grid").datagrid(‘getRows‘)[editIndex])) { //[w24] 

                            $("#grid").datagrid(‘deleteRow‘, editIndex);

                     }

                     editIndex = undefined; //[w25] 

              }

       }

       function isEmptyObject(obj) {

              // 遍历对象 每一个属性，如果一个属性都没有，是空对象

              for ( var name in obj) {

                     return false;

              }

              return true;

       }

 

最后经过datagrid的初始化框中的出力函数onAfterEdit : function(rowIndex, rowData, changes) { $.post(); 提交数据

注意，编辑的列需指明可辑属性

var columns = [ [ {

              field : ‘id‘,

              title : ‘工作单号‘,

              width : 120,

              align : ‘center‘,

              editor : {

                     type : ‘validatebox‘,  //[w26] 

                     options : {

                            required : true  //[w27] 

                     }

              }

       }, {

技巧：添加鼠标右键菜单

1.初始化表格datagrid内：

  • onRowContextMenu : function(e, rowIndex, rowData) {  //[w28] 

                            e.preventDefault();//[w29] 

                            $(‘#menu‘).menu(‘show‘, {

                                   left : e.pageX, // 鼠标当前横坐标

                                   top : e.pageY

                            // 鼠标当前纵坐标

                            });

                           $("#showUserId").val(rowData.id);

                           $("#showUserName").html(rowData.username);

                     }

  1. 鼠标右键菜单项

<!-- 自定义菜单 -->

    <div id="menu" class="easyui-menu" style="width:120px;">

       <div onclick="showWindow()">菜单项一</div>

       <div>菜单项二</div>

    </div>

 

 

 

easyUI的form表单数据校验

$(‘#save‘).click(function(){

                     // 判断表单校验是否通过，如果通过再提交

                     if($(‘#form‘).form(‘validate‘)){

                            // 通过

                            $(‘#form‘).submit();

                     }else{

                            $.messager.alert("警告","表单存在非法数据，请修正！","warning");

                     }

              });

下拉项，通过ajax从服务器中读取数据，显示

<input class="easyui-combobox" name="standard.id"                       data-options="valueField:‘id‘[w30] ,textField:‘name‘[w31] ,url:‘${pageContext.request.contextPath }/standard_ajaxlist.action‘" />

 

easyUI搜索框searchbox

第一步：搜索框

<input id="ss" class="easyui-searchbox" style="width:300px"

                     data-options="menu:‘#menu‘,prompt:‘请输入您的查询内容‘,searcher:doSearch" />[w32] 

              <div id="menu" style="width:120px">

                     <div data-options="name:‘arrivecity‘">按到达地查询</div>

                     <div data-options="name:‘product‘">按商品查询</div>

              </div>

js函数

function doSearch(name, value){

              $("#grid").datagrid("load",{

                     conditionName:value,

            conditionValue:name

[w33]              });

       }

 

服务器代码：全文搜索

 

 [w1]页面跳转

 [w2]返回一个对应的panels

 [w3]切割为数组，两行

 [w4]两部分，两列

 [w5] != null

 [w6]各种框架主题替换

 [w7]查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

 

 [w8]搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

 

 [w9]js函数只需要放在javascript标签里面，

$(“#p”).onclick();需要放入$(function(){

       里面初始化加载

}

);

 [w10]js中没有trim函数

$.trim(txtNewPass)==""

 [w11]函数名称

 [w12]//冻结列 就是指定显示参照列 使其不会出现滚动条

 

 [w13]显示字段名称

 [w14]是否可选

 [w15]不是冻结列

 [w16]将参数转换为json格式

 [w17]添加双击事件，给成员变量赋值：选择的行号

 [w18]行索引值

 [w19]如果行索引值已经赋值，则停止编辑 行

 [w20]如果行索引值未定义则，插入一行

 [w21]开始编辑

 [w22]重新赋值

 [w23]结束编辑

 [w24]如果取消编辑行为空，则删除所在行

 [w25]重新赋值，未定义

 [w26]text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.

 

 [w27]为输入框类型，定制一些属性

如果行编辑时候，存在validatebox 校验效果，如果不满足校验，无法进行endEdit 事件

 

 [w28]e 事件对象， rowIndex 行号 , rowData 行数据

 [w29]阻止默认事件执行

 [w30]值

 [w31]显示项

 [w32]

menu 指定搜索选项

prompt 默认提示内容

searcher 点击搜索时，执行js函数

 [w33]json格式参数传入，重新加载

esayUI实践的一些体会


联系
我们