一．表的结构

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({});