直接在列中选取快速筛选栏的值
在Grid中添加：
/**
* We override getColumns() to change format functions for some columns.
* You could also write them as formatter classes, and use them at server side
*/
protected getColumns(): Slick.Column[] {
var columns = super.getColumns();
var fld = Northwind.OrderRow.Fields;
Q.first(columns, x => x.field == fld.CustomerCompanyName).format =
ctx => `<a href="javascript:;" class="customer-link">${Q.htmlEncode(ctx.value)}</a>`;
Q.first(columns, x => x.field == fld.OrderDate).format =
ctx => `<a href="javascript:;" class="date-link">${Q.formatDate(ctx.value)}</a>`;
Q.first(columns, x => x.field == fld.EmployeeFullName).format =
ctx => `<a href="javascript:;" class="employee-link">${Q.htmlEncode(ctx.value)}</a>`;
Q.first(columns, x => x.field == fld.ShipCountry).format =
ctx => `<a href="javascript:;" class="ship-country-link">${Q.htmlEncode(ctx.value)}</a>`;
return columns;
}
protected onClick(e: JQueryEventObject, row: number, cell: number): void {
// let base grid handle clicks for its edit links
super.onClick(e, row, cell);
// if base grid already handled, we shouldn"t handle it again
if (e.isDefaultPrevented()) {
return;
}
// get reference to current item
var item = this.itemAt(row);
// get reference to clicked element
var target = $(e.target);
if (target.hasClass("customer-link")) {
e.preventDefault();
let message = Q.format(
"<p>You have clicked an order from customer: {0}.</p>" +
"<p>If you click Yes, i'll open Customer dialog.</p>" +
"<p>If you click No, i'll open Order dialog.</p>",
Q.htmlEncode(item.CustomerCompanyName));
Q.confirm(message, () => {
// CustomerDialog doesn't use CustomerID but ID (identity)
// so need to find customer to get its actual ID
var customer = Q.first(Northwind.CustomerRow.getLookup().items,
x => x.CustomerID == item.CustomerID);
new Northwind.CustomerDialog().loadByIdAndOpenDialog(customer.ID);
},
{
htmlEncode: false,
onNo: () => {
new Northwind.OrderDialog().loadByIdAndOpenDialog(item.OrderID);
}
});
}
else if (target.hasClass("date-link")) {
e.preventDefault();
var ordersInSameDate = Q.count(this.view.getItems(), x => x.OrderDate == item.OrderDate);
Q.notifyInfo("You clicked an order from date " +
Q.formatDate(item.OrderDate) + ". There are " +
ordersInSameDate + " orders from the same date that is loaded in grid at the moment");
}
else if (target.hasClass("employee-link")) {
e.preventDefault();
Q.notifySuccess("You clicked an employee name, " +
"so i've opened a new Order Dialog from same customer " +
"with that employee prepopulated!");
new Northwind.OrderDialog().loadEntityAndOpenDialog(<Northwind.OrderRow>{
CustomerID: item.CustomerID,
EmployeeID: item.EmployeeID
});
}
else if (target.hasClass("ship-country-link")) {
e.preventDefault();
Q.notifySuccess("Let's filter the grid to orders from " + item.ShipCountry);
var countryFilter = this.findQuickFilter(Serenity.LookupEditor,
Northwind.OrderRow.Fields.ShipCountry);
countryFilter.value = item.ShipCountry;
this.refresh();
}
}