easyui的一点学习和一点代码

最新推荐文章于 2025-06-20 14:00:32 发布

原创最新推荐文章于 2025-06-20 14:00:32 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui学习的一点代码

本文介绍了 EasyUI 框架的几个实用技巧，包括 tabs 属性的使用、阻止链接默认行为的方法、使按钮边框透明的设置、datagrid 的配置及自定义 toolbar 的生成方式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.tabs属性：http://www.jeasyui.net/plugins/160.html
<div class="easyui-tabs" id="div_tab" style=" background-color: #E0ECFF;height: 600px">
</div>
function addTab(title, url) {
if($('#div_tab').tabs('exists', title)) {
$('#div_tab').tabs('close', title);
}
var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:90%"></iframe>';
$('#div_tab').tabs('add', {
title: title,
content: content,
closable: true,
});
}

//通过这样打开页面
2.<a href="javascript:void(0);" onclick="alert('ok');"></a>
这里表示这个链接不做跳转动作，执行onClick事件。

3.plain=\"true\"可以实现easyui按钮透明边的隐藏，当鼠标移动上去的时候再显示出来。

4.datagrid的格式
$('#dg').datagrid({
title: '销售单信息', //表达名字
toolbar: "#tb", //存放的toolbar
rownumbers: 'true', //行数
pagination: 'true', //是否分页
pagePosition: 'bottom',
fitColumns: 'true', //宽度填满表格，但是必须至少指定一个td的长度
fit: 'false', 在使用easyui layout布局的过程中，
大多人都会使用fit属性来保证页面调整大小时layout能够重新排版，适应整个页面的调整
columns: [
[{
field: 'ck',
checkbox: 'true',
},
{
field: 'ID',
title: '编号',
width: '18%',
},
{
field: 'CUSTOMER_TYPE',
title: '用户组',
width: '18%',
},
{
field: 'CUSTOMER_NAME',
title: '配送单位',
width: '18%',
align: 'center',
},
{
field: 'DISTRIBUTION_DATE',
title: '配送时间',
width: '18%',
align: 'center',
},
{
field: 'STATE',
title: '订单状态',
width: '18%',
align: 'center',
},
]
],

});

toolbar的生成方法
但是需要在网页中有一个地方有<div id="tb"></div>
var toorBarListSales = [{
label: '打印原始销售单',
icons: 'icon-print',
},
{
label: '打印执行销售单',
icons: 'icon-print',
},
{
label: '查看数据',
icons: 'icon-undo',
},
{
label: '查询',
icons: 'icon-search',
func: 'ok() ', //可以写可以执行的函数
}
]

function getToorBarListSales() {
var content = '';
len = toorBarListSales.length;
for(var i = 0; i < len; i++) {
content += "<a href=\"javascript:void(0)\" class=\"easyui-linkbutton\" iconCls=\"" + toorBarListSales[i].icons + "\" plain=\"true\" onclick=\"" + toorBarListSales[i].func + "\">" + toorBarListSales[i].label + "</a>"
}
return content;
}
var toobarList = getToorBarListSales();
$("#tb").append(toobarList);

5.ajax方法
$.ajax({ //调用ajax方法，从服务器获取到该订单的所有数据
type: "get",
url: _url,
dataType: "json", //服务器返回的数据类型
success: function(result) {
if(result != null) {

$('#dg').datagrid('loadData', result.rows);
// gatagrid获取数据

}
}, //请求成功后，接受服务器传来的Json字符串，并做相应的处理
error: function(xhr, status, error) {
$.messager.alert("错误", "请求失败!");
}
});