easyui 使用汇总

最新推荐文章于 2022-09-08 11:39:12 发布

原创最新推荐文章于 2022-09-08 11:39:12 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

js 同时被 2 个专栏收录

40 篇文章

订阅专栏

easyui

10 篇文章

订阅专栏

本文介绍如何使用EasyUI框架中的组合框(combobox)进行数据选择与联动，并展示了如何配置数据网格(datagrid)以实现单元格鼠标悬停提示等功能。通过具体的代码示例，帮助读者更好地理解和应用这些组件。

NND，以后都不想用，还能在贱一点吗？

个人使用记录：

combo：

1.取选中的值：$("#area1").combobox("getValue")

2.默认选中第一个值、选择联动：

$("#area1").combobox({
  editable:false,
  valueField: 'id',
  textField: 'text',
  url: 'listDic.do?pid=1001',
  onSelect: function(record){
   ds.load({
    params:{ area: record.id}
   });
  },
  onLoadSuccess: function(){
   var val = $(this).combobox("getData");
         for (var item in val[0]) {
             if (item == "id") {
                 $(this).combobox("select", val[0][item]);
             }
         }
        }
});

//赋值

$('#sex').combobox('select', data.sex);//静态<select>标签
$('#age').numberbox('setValue', data.age);
$('#date').datebox('setValue', data.date);

//可用、不可用

$('#retype').combobox({disabled:true});
$('#select').combobox('enable');

datagrid:

1.单元格鼠标悬停tooltip：

{field:'title',title:'主题',width:300,formatter: function(value, row, index) {
                    return '<div title="' + row.fkcontext + '" class="mytips">' + value + '</div>';
                }
         },

onLoadSuccess:function(data){
   $(".mytips").tooltip({
    onShow: function(){
     $(this).tooltip('tip').css({
      width:'200',
                        boxShadow: '1px 1px 3px #292929'
     });
    }
            });
        }

layout：

1.修改布局title

$('body').layout('panel','center').panel({title: ‘111111’});//新增/修改

$('body').layout('panel','center').panel({title: ‘’});//删除