前端（EasyUI -1.4.1）躺坑之旅
作为一个蹩脚前端，已经接触过一段时间EasyUI了，这个框架其实很老了，基本都是一些原生JS操作。我也只能一葫芦画瓢了，有些前端的原理其实并不是那么的理解，但是一般来说基本还是能搞定的，百度下，copy下。这边就记录下一些坑，以便日后查看，也有个借鉴。
DataGrid 组件
定义 表 ：
工具栏定义 $("#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 '
';
},
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组件 异步请求加载数据
var data; // 异步请求
$.ajax({
method:'get',
url:'xxx',
dataType : 'json',
type : 'POST',
async:false,
success: function (data){
data = data;
}
});
$("#id").combobox({
prompt:'输入关键字后自动搜索',
method:'get',
url:'xxx',
editable:true,
valueField:'value', // 传入后台的值
textField:'text', // 前端展示的值
onChange:function(value) { // 监听值改变时的方法
},
loadFilter:function(data) { // 数据过滤
var d = [];
for (var i = 1; i < data.length; i++){
if(){ // 频道条件
d.push(date);
}
}
return d;
},
onLoadSuccess:function(){
var data = $('#id').combobox('getData');
$("#id").combobox('select',data[0].value); // 设置默认值
}
});
$("#id").combotree({ // 多选
method:'get',
url:'xxx',
editable:false,
checkbox:true,
multiple: true,
loadFilter:function(data) {
}
}); combox 加载数据的方式 （不是提前加载出来，而是根据客户的输入去后台请求在渲染组件的）
// 第一种方式
function comboxDateLoad1(param, success, error) {
//获取combobox输入的值
var q = param.q;
if (q == undefined || q == "" || q == null)
return false;
$.ajax({
url: "xxx",
type: "get",
success: function (data) {
//执行loader的success回调函数(装载数据)
success(data);
console.log(data)
},
//异常处理
error: function (xml, text, msg) {
error.apply(this, arguments);
}
});
}
// 第二种方式
function comboxDateLoad2(param, success, error) {
//获取combobox输入的值
var q = param.q;
var field2= $("#field2").combobox('getValue');
if (q == undefined || q == "" || q == null)
return false;
$.ajax({
url: "xxx",
type: "post",
data: { field1: q ,field2:field2},
dataType: "json",
success: function (data) {
//执行loader的success回调函数(装载数据)
success(data.rows);
},
//异常处理
error: function (xml, text, msg) {
error.apply(this, arguments);
}
});
}
$('#comboxId').combobox({
prompt:'输入关键字后自动搜索',
required:true,
method:'get',
url:'',
mode: "remote",
editable:true,
valueField:'id',
textField:'text',
loader: comboxDateLoad,
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) != -1;
}
});
combotree用法支持多选，而且可以控制同一个节点下的子节点只能勾选一次，不同的节点下的子节点可以允许多选
//树状下拉框列表 - 支持多选
$("#combotreeId").combotree({
method:'post',
url:'xxx',
editable:false,
valueField:'id',
textField:'text',
lines: true,
multiple : true,//设置可以多选，显示多选框，不设置不会出现多选框
checkbox:true,//显示多选框
cascadeCheck:true,
onlyLeafCheck : true,//只在叶子节点显示多选框
onBeforeSelect:function(node){
if(node.parentId<=0){
return false;
}
},
onBeforeCheck : function(node, checked){//控制只能选一项
if(checked){//当前为选中操作
var nodes = $(this).tree("getChecked");
//控制同一节点只能选一项，选中某一项后后面不能再勾选
for(var i=0; i其他 提示消息框，带有确认按钮的，以及可以自定义按钮的提示框
// // 指定关闭对应的title页面 此方法用于