easyUI学习记录
Datetimebox 修改默认格式,以及初始值
<span style="margin-right:5px;">日期</span>
<input id="dtStart" type="text">
$('#dtStart').datetimebox({
required: true,
showSeconds: false,
formatter: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hour = hour < 10 ? '0' + hour : hour;
min = min < 10 ? '0' + min : min;
sec = sec < 10 ? '0' + sec : sec;
return year + "-" + month + "-" + day + " " + hour+":"+min+":"+sec;
},
parser:function (s) {
var t = Date.parse(s);
if (!isNaN(t)){
return new Date(t);
} else {
return new Date(s);
}
}
});
$('#dtEnd').datetimebox({
required: true,
showSeconds: false,
formatter: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hour = hour < 10 ? '0' + hour : hour;
min = min < 10 ? '0' + min : min;
sec = sec < 10 ? '0' + sec : sec;
return year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec;
},
parser: function (s) {
var t = Date.parse(s);
if (!isNaN(t)) {
return new Date(t);
} else {
return new Date(s);
}
}
});
var yesday = new Date();
yesday.setDate((new Date()).getDate() - 1);
yesday.setHours(7);
yesday.setMinutes(50);
yesday.setSeconds(0);
var today = new Date();
today.setHours(7);
today.setMinutes(49);
today.setSeconds(0);
$("#dtStart").datetimebox('setValue', yesday);
$("#dtEnd").datetimebox('setValue', today);
Layout模板 (上下两块示例)
<body class="easyui-layout" style="margin:10px;">
<div data-options="region:'north',hideCollapsedContent:false" split="true" title="查詢條件" style="height:25%;">
</div>
<div id="content" region="center" title="查詢結果" style="padding:1px;width:100%;height:100%;">
</div>
</body>
//region 是上半部分与主界面的方位，这边是放在上面
hideCollapsedContent为true时隐藏折叠面板上的标题栏
新增自定义icon图标
<a id="outexcel" class="easyui-linkbutton" data-options="iconCls:'icon-excel'">導出</a>
1、 找到一张图片，缩小剪切到16*16
2、 在EasyUI/themes/icon.css中新增 样式 即可
.icon-excel{
background:url('icons/excel.png') no-repeat center center;
}
Tabs多个页签
<div id="tt" style="width:100%;height:100%;">
<div title="生產報廢統計明細" style="padding:5px;">
<table id="details"></table>
</div>
<div title="生產報廢統計工站匯總" style="padding:5px;">
<table id="count"></table>
</div>
</div>
$('#tt').tabs({
border: false,
onSelect: function (title) {// 选中时出发事件
//alert(title + ' is selected');
}
});
在layout主界面中，新增datagrid显示
<div title="生產報廢統計明細" style="padding:5px;">
<table id="details"></table>
</div>
$('#count').datagrid({
url: '../ProductScrapAnalysis/GetGridSummaryData',
fit: true, //标题栏固定，但是需要设置上一级的 width hight
pagination: true, //顯示分頁功能
singleSelect: true, //單選
remoteSort: false, //设置列排序就将remoteSort设置为false
pageSize: 50, //还有属性可以设定size范围
rownumbers: true, //显示行号
striped: true, //隔行显示不同条纹
loadMsg: "正在拼命加載中。。。。",
//rowStyler: function(index,row){ //根據數據，設定行 的style
// if (row.SUMAHSTRIPQTY > 4 && row.SUMAHSTRIPQTY < 10) {
// return 'background-color:pink;color:blue;'; // return inline style
// // the function can return predefined css class and inline style
// // return {class:'r1', style:{'color:#fff'}};
// }
//},
//loadFilter:function(data)//過濾原始數據，不過需要返回含有total和rows的對象
//{
// console.log(data);
// var value = {
// total: 0,
// rows: []
// };
// data.rows.forEach(function (item) {
// if (Number(item.SUMAHPNLQTY) > 0 && Number(item.SUMAHPNLQTY) < 6) {
// value.rows.push(item);
// value.total++;
// }
// });
// return value;
//},
//loader: 通常和ajax一起用 ，url聽說會覆蓋datagrid 的URL屬性
columns: [[// halign 显示标题的位置 align 显示内容的位置 ，一般标题居中，文字靠左，数字靠右
{ field: 'FACTORYNAME', title: '廠別', width: 120, halign: 'center' },
{ field: 'AHSPECCODE', title: '工站代碼', width: 100, halign: 'center' },
{ field: 'SPECNAME', title: '工站名稱', width: 100, align: 'left', halign: 'center' },
{ field: 'SUMAHSTRIPQTY', title: '報廢條數匯總', width: 100, align: 'right', sortable: 'true' },
{ field: 'SUMQTY', title: '報廢PCS數匯總', width: 100, align: 'right', sortable: 'true' },
{
field: 'SUMAHPNLQTY', title: '報廢PNL數匯總', width: 100, align: 'right', sortable: 'true'
// ,styler: function (value, row, index) { // 根據單元格的數據，設定單元格的 style
// if (value < 10) {
// return 'background-color:#ffee00;color:red;';
// // the function can return predefined css class and inline style
// // return {class:'c1',style:'color:red'}
// }
//}
},
]],
ExportFileName: '生產報廢統計工站匯總', //自定义属性可以通过$(“#dg”).datagrid(""options"").ExportUrl 获得
onLoadSuccess: function (data) { $(this).datagrid('options').SqlCmdStr = data.SqlCmd; },// 加载成功时获得 URL、回传数据的属性
onRowContextMenu: function (e, index, row) { e.preventDefault(); $(this).datagrid('ShowGridMenu', e) }, //右鍵導出Excel
ExportUrl: '../ProductScrapAnalysis/ExportData'
});
获取datagrid 自定义属性
OwnFileName: '生產報廢統計明細',
onLoadSuccess: function (data) {
options 返回属性对象（datagrid属性，不是列属性）。
//$(this).datagrid('options').Ownsql = data.SqlCmd;
console.log(data); //{ total: rows: } 回传的值还可以封装其他属性
},
onRowContextMenu: function (e, index, row) {
//e.preventDefault(); $(this).datagrid('ShowGridMenu', e)
e.preventDefault();
console.log($(this).datagrid("options").OwnFileName);
JQuery 自定义方法
$.extend({
max: function (a, b) { if (a < b) return b; return a; }
});
或者
$.max2 = function (a, b) { if (a > b) return b; return a; };
DataGrid主要有几类属性或者方法
数据网格（DataGrid）属性
比如
- $('#dg').datagrid({
- toolbar: '#tb'
- });
$("#dg").datagrid({
url: '../TestDatagridProperty/getData',
fit: true,
//title: '生產報廢統計明細',
pagination: true, //顯示分頁功能
singleSelect: true, //單選
remoteSort: false, //设置列排序就将remoteSort设置为false
列（Column）属性
是网格属性column的属性
columns: [[
{ field: 'id', title: 'id', width: 120, halign: 'center' },
{ field: 'name', title: '名稱', width: 100, halign: 'center' }
]],
事件 与 网格属性并列
columns: [[
{ field: 'id', title: 'id', width: 120, halign: 'center' },
{ field: 'name', title: '名稱', width: 100, halign: 'center' }
]],
OwnFileName: '生產報廢統計明細',
onLoadSuccess: function (data) {
//$(this).datagrid('options').Ownsql = data.SqlCmd;
console.log(data); //{ total: rows: } 回传的值还可以封装其他属性
},
onRowContextMenu: function (e, index, row) {
//e.preventDefault(); $(this).datagrid('ShowGridMenu', e)
e.preventDefault();
console.log($(this).datagrid("options").OwnFileName);
}, //右鍵導出Exce
方法 第一个参数是方法名，后面是参数
- $('#dg').datagrid('reloadFooter',[
- {name: 'name1', salary: 60000},
- {name: 'name2', salary: 65000}
- ]);
扩展控件方法
$.extend($.fn.datagrid.methods, {
showdata: function (jq, e) {//测试easyUI自定义方法会自动传递对象本身
console.log(jq.datagrid("options").OwnFileName);
console.log("--------------------");
console.log(e);
}
});
自定义扩展方法，会自动传递对象本身 类似于 $(“”)
在事件中调用
onRowContextMenu: function (e, index, row) {
e.preventDefault(); $(this).datagrid('showdata', e)
}
只需要传递后一个参数即可
已经封装好的一个DataGrid下载文件的方法
前端
ExportFileName: '生產報廢統計明細',
onLoadSuccess: function (data) { $(this).datagrid('options').SqlCmdStr = data.SqlCmd; },//加载时data属性sql赋给 datagrid
onRowContextMenu: function (e, index, row) { e.preventDefault(); $(this).datagrid('ShowGridMenu', e) }, //右鍵導出Excel
ExportUrl: '../ProductScrapAnalysis/ExportData'
JS中扩展datagrid自定义方法'ShowGridMenu'
@"(function ($) {
//DataGrid右鍵菜單導出
$.extend($.fn.datagrid.methods, {
ShowGridMenu: function (jq, e) {
ShowGridMenu(e,jq);
}
});
//DataGrid Edit Module
$.extend($.fn.datagrid.methods, {
EditModule: function (jq, e) {
_EditDataGrid(jq,e);
}
});
//取得Form方法
$.extend($.fn.form.methods, {
GetDatas: function (Frm, e) {
return _GetFormData(Frm,e);
}
});
})(jQuery);";
封装JS方法ShowGridMenu
@"function ShowGridMenu(e,dg)
{
var MenuTemp = $('#DataGridMenuTemp');
//產生菜單內容
if(!$('#DataGridMenuTemp').length)
{
$('body').append('<div id=""DataGridMenuTemp"" style=\""width:120px;\"">'+
'<div id=""DataGridExportExcel"">導出Excel</div>'+
'</div>');
$('#DataGridMenuTemp').menu({});
}
$('#DataGridMenuTemp').menu('show', { left: e.pageX, top: e.pageY });//顯示菜單
//Excel導出實作
$(""#DataGridExportExcel"").click(function () {
var Url ='';
if(dg.datagrid(""options"").ExportUrl == null)
{
Url = dg.datagrid(""options"").url;
var ExportUrl = dg.datagrid(""options"").url.split('/');
Url = Url.replace(ExportUrl[ExportUrl.length - 1], 'ExportData');
}
else
{
Url=dg.datagrid(""options"").ExportUrl;
}
var d = new Date();
var FileName;
if (dg.datagrid(""options"").ExportFileName == '') {
FileName = 'ExcelExport';
} else {
FileName = dg.datagrid(""options"").ExportFileName;
}
//若SqlCmd內有<、>符號後連接英文字體未空隔，會被視為Html標籤，此處強制在符號前後加空隔
var SqlCmd = dg.datagrid(""options"").SqlCmdStr;
SqlCmd=SqlCmd.replace('<',' < ');
SqlCmd=SqlCmd.replace('>',' > ');
$.download(Url, {
SqlCmd: SqlCmd, //查詢語句
Columns: GetDataGridColumns(dg), //取得欄位名稱傳送至後台
FileName: FileName + '.xls'//導出檔名
})
})
}";
封装JQuery扩展方法
"$.download = function (url, data) {" +
"if (url && data) {" +
"var form = $('<form></form>');" +
"form.attr('action', url + (url.indexOf(\"?\") != -1 ? \"&\" : \"?\") + \"rand=\" + Math.random());" +
"form.attr('method', 'post');" +
"for (var item in data) {" +
"var input = $('<input type=\"hidden\" />');" +
"input.attr('name', item);" +
"input.attr('value', data[item]);" +
"form.append(input);" +
"}" +
"form.appendTo('body').submit().remove();" +
"};};";
后台
public ActionResult ExportData(string SqlCmd, string Columns, string FileName)
{
try
{
var Data = db.ExecuteDataTable(SqlCmd);
return File(Data.ToExcelStream(Columns), "application/vnd.ms-excel", FileName);//回傳檔案
}
catch (Exception ex)
{
return Json(new { Result = false, Msx = ex.Message });
}
}
public static byte[] ToExcelStream(this DataTable dt, string Column)
{
HSSFWorkbook hssfworkbook = new HSSFWorkbook();
ISheet sheet = hssfworkbook.CreateSheet("Sheet1");
//表头
IRow row = sheet.CreateRow(0);
string[] Columns = Column.Split(',');
int c = 0;
foreach (string col in Columns)
{
ICell cell = row.CreateCell(c);
cell.SetCellValue(col);
c++;
}
//数据
for (int i = 0; i < dt.Rows.Count; i++)
{
IRow row1 = sheet.CreateRow(i + 1);
for (int j = 0; j < dt.Columns.Count; j++)
{
ICell cell = row1.CreateCell(j);
cell.SetCellValue(dt.Rows[i][j].ToString());
}
}
//转为字节数组
MemoryStream stream = new MemoryStream();
hssfworkbook.Write(stream);
return stream.ToArray();
}
Combobox 相关级联效果
$('.factory:eq(0)').combobox({
url: '../EQPStatusDuration/getFactory',
valueField: 'text',
textField: 'text',
editable: false,
panelWidth: '130px',
onLoadSuccess: function ()
{
let _this = this;
$.ajax({
url: "../EQPStatusDuration/getWORKCENTER",
type: "post",
contentType: "application/x-www-form-urlencoded; ", //默认，表单提交格式
dataType: "json",
data: {factoryname:$(_this).combobox('getValue')},
success: function (data,status) {
$(".lineType:eq(0)").combobox('loadData', data);
},
error:function (data,status)
{
alert(status);
}
});
}
});
//$('.factory').combobox('select',0);
$(".lineType:eq(0)").combobox({
//url: '../SpeedCountBYS/getWORKCENTER',
valueField: 'text',
textField: 'text',
panelWidth: '160px',
onChange: function () {
let _this = this;
$.ajax({
url: "../EQPStatusDuration/getOPERATION",
type: "post",
contentType: "application/x-www-form-urlencoded; ", //默认，表单提交格式
dataType: "json",
data: { factoryname: $('.factory:eq(0)').combobox('getValue'), lineType: $(_this).combobox('getValue') },
success: function (data, status) {
$(".partNo:eq(0)").combobox('loadData', data);
},
error: function (data, status) {
alert(status);
}
});
}
});
$(".partNo:eq(0)").combobox({
//url: '../SpeedCountBYS/getOrderType',
valueField: 'text',
editable: false,
textField: 'text',
panelWidth: '160px',
onChange: function () {
let _this = this;
$.ajax({
url: "../EQPStatusDuration/getEQPType",
type: "post",
contentType: "application/x-www-form-urlencoded; ", //默认，表单提交格式
dataType: "json",
data: { factoryname: $('.factory:eq(0)').combobox('getValue'), lineType: $('.lineType:eq(0)').combobox('getValue'), OPERATION: $(_this).combobox('getValue') },
success: function (data, status) {
$(".EQPType:eq(0)").combobox('loadData', data);
},
error: function (data, status) {
alert(status);
}
});
}
});
$(".EQPType").combobox({
//url: '../ProductScrapAnalysis/getOrderType',
valueField: 'text',
editable: false,
textField: 'text',
panelWidth: '160px'
});
