FlexiGrid使用教程
一．表的结构
1 表结构
var FriendLink = {
tableName: 'FriendLink', --表名
title: '友情链接', --显示在Grid最上面的中文
dialogtitle: '', --弹出对话框的标题
columns: [{ --表数据结构
display: '友链类型', --字段中文名称
name: 'TypeID', --数据库中的字段名称
width: 100, --在Grid上的宽度
sortable: true, --是否可以排序
align: 'left', --文字的对齐方式
process: formatForeignKeyValue, --将单元格值格式化的方法
processEditor: formatForeignKey, --将控件中值格式化的方法 （暂不用）
isdefault: null, --是否默认（暂不用）
reg: '^\d+$', --正则表达式 （验证时使用）
operator: 'Eq', --过滤查询的方式 （Like | Eq）
isPrimaryKey: false, --是否是主键
isForeignkey: true, --是否是外键
foreignkeyColumnType: 'name', --外键的类型
foreignKeyTableName: 'FriendLinkType', --外键表的名字
foreignKeytableSchma: --外键表的结构
[{display: '序号', name: 'ID', isForeignkey: false, index: 0, dataType: 'Int32'},
{display: '类型名称', name: 'Name', isForeignkey: false, index: 1, dataType: 'AnsiString'}]
}]
};
2. 共用函数
function formatMoney(value, pid) { return "￥" + parseFloat(value).toFixed(2); } –格式化货币用
function formatForeignKey(value, pid) { return value.split('_')[0]; } --格式化有外键关系的字段的值
function formatForeignKeyValue(value, pid) { return (value.split('_')[1] != '') ? value.split('_')[1] : value.split('_')[0]; } --格式化有外键关系的文本
3. flexigrid
$("#dataList").flexigrid({
height: document.documentElement.clientHeight - 155, --高度
width: $("#ptable").width() - 3, --宽度
url: "WebService/" + FriendLink.tableName + "_Get.ashx",--获取数据的服务
colModel: FriendLink.columns, --要显示的列的数据
searchitems: $.grep(FriendLink.columns, function(col, i) { return col.isSearchItem; }),
--可筛选的字段
buttons: [{ --新增按钮
name: 'Add', displayname: "新增", bclass: 'Add', onpress: toolbarItem_onclick
},{ --删除按钮
name: 'Delete', displayname: "删除", bclass: 'Delete', onpress: toolbarItem_onclick
}],
sortname: "ID", --默认排序字段
sortorder: "desc", --默认排序字段的排序顺序
title: FriendLink.title, --显示在表格上方的标题
usepager: true, --是否支持分页
useRp: false, --是否可手动设置分页每页的数据量
qtype: "TypeID", --默认查询条件字段
qop: "Eq", --默认查询字段取值方式
query: FriendLink.columns[2].defaultValue, --默认查询字段的值
rowbinddata: true, --是否将值绑定到行上
showcheckbox: true, --是否显示checkbox
rowhandler: function(row) { --行的右键事件
$(row).contextmenu({ --右键显示菜单
width: 150, --右键菜单的宽度
items: [{
text: "编辑", --按钮的名称
icon: "../css/images/icons/edit.png", --按钮的图标
alias: "contextmenu-edit", --按钮的命令
action: contextMenuItem_click --按钮执行的方法
},{
text: "删除",
icon: "../css/images/icons/rowdelete.png",
alias: "contextmenu-delete",
action: contextMenuItem_click
},{
text: "刷新",
icon: "../css/images/icons/table_refresh.png",
alias: "contextmenu-reflash",
action: contextMenuItem_click
}]
});
}
});
$(window).resize(function() {
var w = $("#ptable").width() - 3;
var gh = document.documentElement.clientHeight - 155;
$("#dataList").flexResize(w, gh);
}); --flexigrid的自动缩放
$.each(FriendLink.columns, function(i, col) { $("#dataList").flexToggleCol(col.index, col.isShowItem);});
--flexigrid不显示的列的隐藏
4. dialog
$('#dialog_div').dialog({
hide: '',
zIndex: 100,
autoOpen: false,
modal: true,
overlay: { opacity: 0.5, background: "black" },
buttons: {
'取消': function() { $(this).dialog("close"); },
'重置': function() { $(this).children('form')[0].reset(); },
'提交': function() { InsertUpdateData(); }
}
});
function showEditorDialog(rowData) {
if (rowData != null) {
var _value0 = (rowData == null) ? null : rowData[0];
$('#ff0').attr('checked', _value0 ? 'checked' : '');
var _value1 = (rowData == null) ? null : rowData[1];
$('#ff1').attr('checked', _value1 ? 'checked' : '');
$('#_ff2').val(FriendLink.columns[2].defaultValue);
var _value3 = (rowData == null) ? null : rowData[3];
$('#ff3').attr('checked', _value3 ? 'checked' : '');
var _value4 = (rowData == null) ? null : rowData[4];
$('#ff4').attr('checked', _value4 ? 'checked' : '');
var _value5 = (rowData == null) ? null : rowData[5];
$('#ff5').attr('checked', _value5 ? 'checked' : '');
}else{
$('#_ff2').val(FriendLink.columns[2].defaultValue);
}
$('#dialog_div .ui-dialog-title').text((rowData != null ? '修改' : '添加') + FriendLink.dialogtitle);
$('#dialog_div').dialog('option', 'height', document.documentElement.clientHeight);
$('#dialog_div').dialog('option', 'width', document.documentElement.clientWidth);
$('#dialog_div').dialog('open');
}
5. 按钮点击后执行的方法
function toolbarItem_onclick(cmd, grid) {
if (cmd == "Add") {
showEditorDialog();
}else if (cmd == "Delete") {
var ids = $("#dataList").getCheckedRows();
if (ids != '') {
jConfirm('你确认要删除吗？', '提示', function() {
DeleteData(ids);
});
} else {
jAlert('请选择您要删除的数据！', '提示');
}
}
}
function contextMenuItem_click(target) {
var id = $(target).attr("id").substr(3);
var cmd = this.data.alias;
var ch = $.browser.msie ? target.ch : target.getAttribute("ch");
var rowdata = ch.split("_FG$SP_");
if (cmd == "contextmenu-edit") {
showEditorDialog(rowdata);
}else if (cmd == "contextmenu-delete") {
jConfirm('你确认要删除吗？', '提示', function() {
DeleteData(id);
});
}else{
$("#dataList").flexReload();
}
}
6.提交到数据库的方法
function InsertUpdateData() {
$('#dialog_form').ajaxSubmit({
url: "WebService/" + FriendLink.tableName + "_Add_Edit.ashx",
type: 'POST',
dataType: "json",
resetForm: true,
beforeSubmit: function(formData, jqForm) {
for (var i = 0; i < formData.length; i++) {
}
return true;
},
success: function(responseText, statusText) {
if (responseText.result == "OK") {
$('#dialog_div').dialog('close');
$('#dataList').flexReload();
} else {
jAlert(responseText, '消息提示');
}
},
error: function(data) {
jAlert(data.msg, '消息提示');
}
});
};
function DeleteData(ids) {
$.ajax({
type: "POST",
url: "WebService/" + FriendLink.tableName + "_Del.ashx",
data: { "ids": ids },
dataType: "json",
success: function(responseText, statusText) {
if (responseText.result == "OK") {
$('#dataList').flexReload();
$('#dialog_div').dialog('close');
jAlert("成功删除!", '消息提示');
} else {
jAlert(responseText.msg, '消息提示');
}
},
error: function(data) { jAlert(data.msg, '消息提示'); }
});
};
7.初始化控件
$("#ff2").autocomplete('WebService/AutoComplete_All.ashx?tablename=FriendLinkType', {
formatItem: function(row, i, n) { return row[1]; },
formatResult: function(row, i, n) { return row[1]; },
mustMatch: true,
minChars: 0
}).result(function(event, data, formatted) {
$("#_ff2").val(formatted);
});
$('#ff4').upImage({});