作为一个蹩脚前端，已经接触过一段时间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',
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<nodes.length; i++){
if(nodes[i].parentId == node.parentId){
$(this).tree("uncheck", nodes[i].target);//清除之前选中的项
}
}
}
},onLoadSuccess:function(node,data){ // 去掉标签根节点的标签
$(".tree-icon,.tree-file").removeClass(" tree-file");
}
});
// 获取所有勾选的子节点的ID的集合
function getTreeIds(){
//获取当前选中的节点
var doc = $('#combotreeId').combotree('tree');
var treeNodes = doc.tree('getChecked');// 获取树节点的值
var treeIds = [];
for(var i=0;i<treeNodes.length;i++){
treeIds.push(treeNodes[i].id);
}
var treeIdsLst=treeIds.join(",");
return treeIdsLst;
}其他 提示消息框，带有确认按钮的，以及可以自定义按钮的提示框
// // 指定关闭对应的title页面 此方法用于<iframe>定义父页面
$.messager.confirm('确认',"msg",function(r){
if(r){
var jq = top.jQuery;
jq('#id').tabs('close',title);
}
});
// 定义日期
<input id="id" class="Wdate" onFocus="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd'})" style="position:relative;border:1px solid #D3D3D3;background-color:#fff;width:80px;vertical-align: middle;border-radius:5px;"/>
// 定义展示弹出窗口
<div id ="win_id"></div>
$("#id").click(function(){ // 触发按钮
$("#win_id").show().dialog({ // 展示窗口
title: 'title',// 弹出窗口的title
width: 700,
height:750,
closed: false,
cache: false,
modal: true,
left:400,
top:40,
onClose: function () {
// 关闭窗口 执行的操作
},
buttons: [{
text: 'ok',
iconCls: 'icon-ok',
handler: function () {
// 执行的操作
}
},...]
});
});js控制文件上传，支持动态渲染等
<imput id="fileButton" class="easyui-linkbutton" style="margin-left:10px;" iconCls='icon-add' name="文件上传"/>
<input id="uploadFile" type="file" name="file" style="display:none" />var files = []; // 用于存放上传的文件信息
// 第1步
$("#filebutton").click(function(){
$("#uploadFile").click(); // 触发添加文件 ，
});
// 注意；在上传文件时，可能会触发file的change的事件，上次第二次可能导致change触发不了
// 第2步
$("#uploadFile").change(function(){
if (!validateFile("uploadFile")){ // 文件校验
return ;
}
uploadFile();
});
function validateFile(id){ // 文件校验
var fileObject=$("#"+id);
var filepath=fileObject.val();
var fileArr=filepath.split("//");
var fileTArr=fileArr[fileArr.length-1].toLowerCase().split(".");
var filetype=fileTArr[fileTArr.length-1];
if(filetype!="xls"&&filetype!="txt"){ //指定校验的文件 如：txt,xls..
fileObject.focus();
//BootstrapDialog.show({title:'操作提示',message:"文件格式不合法"});
$.messager.alert("操作提示","仅支持xxx文件上传","warning");
var file = $("#"+id) ;
file.after(file.clone().val(""));
file.remove();
return false;
}else{
return true;
}
}
// 上传文件 这个地方需要注意的是，需要引入js（ajaxfileupload.js， 网上应该有，我就暂不提供了） 该js中定义了ajaxFileUpload方法 ，这里直接用
// 注: ajaxfileupload.js 版本没有定义返回json数据的获取（即返回的数据包含了标签，直接拿不到）
// 因此我修改了下，新增了一个类型，可以获取Json的数据 如下：
// 200行的地方新增了：------------
if ( type == "tojson" ){
//eval("data = \" "+data+" \" ");
data = jQuery.parseJSON(jQuery(data).text());
}
// ------------
function uploadFile(){
if (!validateFile("uploadFile")){
return ;
}
var timestamp = {time:new Date().getTime()};
var obj = document.getElementById("uploadFile");
var name = obj.files[0].name;
// ajaxfileupload.js 新增 type = "tojson" 特殊逻辑 接收 json串
$.ajaxFileUpload({
url:'xxx',
type:'post',
data: timestamp,
async:false,
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'uploadFile', //文件上传域的ID
dataType:'tojson',// json 获取不到json的数据，新增的tojson的类型
success: function (data){ //服务器成功响应处理函数
// 根据返回的data,进行其他操作
resetUploadFile(); // 清除缓存，防止第二次上传失效
...
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
$.messager.alert("warning","上传失败:"+e);
return false;
}
});
}
// 清除缓存
function resetUploadFile(){
var file = $("#uploadFile");
file.after(file.clone().val(""));
file.remove();
// 需要重新加载一次，去掉好像会有滴问题，暂没查清原因。哪位大神指点下
$("#uploadFile").change(function(){
uploadFile();
});
}
DataGrid 的部分用法
1、刷新指定一行数据，如： $('#dataGridId').datagrid('refreshRow', index);
2、鼠标指定某一列（单元格）触发事件 如：onClickCell:function(rowIndex, field, value){}
3、合并单元格 如：
onLoadSuccess:function (data){
var mark_field=1;
for (var i=1; i <data.rows.length; i++) {//这里循环表格当前的数据
if (data.rows[i]['field'] == data.rows[i-1]['field']) {//后一行的值与前一行的值做比较，相同就需要合并
mark_field+= 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
$(this).datagrid('mergeCells',{
index: i+1-mark_field, //datagrid的index，表示从第几行开始合并
field: 'companyName', //合并单元格的区域，就是clomun中的filed对应的列
rowspan:mark_field //纵向合并的格数，如果想要横向合并，就使用colspan：mark
})
}else{
mark_field=1; //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
}
}4、弹窗提示 效果如：
$("#dataGridId").datagrid('doCellTip',{'max-width':'1000px','delay':300});
5、dataGrid动态新增行，并且编辑该行
// 新增行
$("#add_button").click(function(){
if (editRow != undefined) {
$("#dataGridId").datagrid('endEdit', editRow);
}
if (editRow == undefined) {
$("#dataGridId").datagrid('insertRow', {
// index: 0,
row: {}
});
}
// 添加其他处理逻辑 如：按钮的显示，隐藏等
$("#button1").show();
$("#button2").hide();
});
// 编辑该行
$("#edit_button").click(function(){
var row = $("#dataGridId").datagrid('getSelected');
if(!row){
$.messager.alert("操作提示","请选择","warning");
}else {
var index = $('#dataGridId').datagrid('getRowIndex',row);//获取行号
editRow = index;
updateRow = index;
$('#dataGridId').datagrid('selectRow', editRow).datagrid('beginEdit', editRow);
}
// 添加其他处理逻辑 如：按钮的显示，隐藏等
$("#button1").show();
$("#button2").hide();
});6、dataGrid动态的加载列
// 动态加载Url
$('#dataGridId').datagrid('options').url=url;
// 加载数据
$("#dataGridId").datagrid("load",pams);
// 动态加载固定列，以及动态列
$("#dataGridId").datagrid({frozenColumns:frozensColumns,columns:deatilColumns});如有描述有误的地方，请各位大神指点.. 抱拳