Jquery网格( VGrid )

分享于 

18分钟阅读

Web开发

  繁體

介绍

VGRID轻量级,配置简单,跨浏览器 兼容网格,用JQUERY构建。

在本文中,我们将在 ASP.NET - MVC中实现网格。

这里网格具有以下内置功能:

  • 标头冻结
  • 列可见性设置
  • 列 inline 编辑和行删除
  • 多页面选择
  • 自定义列宽,table 样式和标题属性设置
  • 列调整大小
  • 列拖放和
  • 在内置的蓝色和 black 主题中
  • 定制过滤器

使用网格

路线图

  • 配置具有基本功能的网格
  • 将可见性设置为特定列
  • 禁用对特定列的排序
  • 添加具有复杂关联的列
  • 启用对特定列的编辑
  • 将选择模式设置为网格
  • 将标题设置为列
  • 启用 MultiPageSelection
  • 启用列可见性设置弹出式菜单
  • 将颜色设置为表格
  • 筛选数据的配置
  • 事件处理器
  • 检索选定/更新的记录
  • 特定列的文本对齐设置
  • 设置列的显示内容
  • 在生成函数中使用网格保存记录
  • 启用列的大小功能
  • 启用拖放功能
  • 为网格启用自定义筛选器
  • 自定义 delete 功能
  • 网格的示例代码 Fragment
配置具有基本功能的网格

在需要实现网格的页面中,添加以下引用:

<!--References --><scripttype="text/javascript"src="~/VGrid/VGrid.js"/><link rel="stylesheet" type="text/css" href="~/VGrid/VGrid.css"/>
<!--Minimum version required-->
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">;</script><scriptsrc="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")"type="text/javascript"></script><!--Add an empty div with unique id--><divid="sampleVGrid">; </div>

Script 标记或者引用的JavaScript页面中,添加 below 代码:

 $(document).ready(function(){
$('#sampleVgrid').VGrid({
 header: {
 Name: {
 title: "Student Name",//Column Title },
 Id: {
 title: "Student Id" },
 'Grade': { 
 title: "Grade", 
 }
 },
 actions: {
 bindingMethod: "/Vgrid/GetData" 
 },
 pageSize: 10,//Number of records to be displayed per page.Default value is 25.  });
});

在服务器端,添加 below 代码:

[HttpPost]public JsonResult GetJsonData(string sortDirection, string sortDescription, int pageSize, int startindex)
{
 //////Server code///return Json(new { Records=list,TotalRows=totalRows});
}
将可见性设置为特定列

可以使用 visibility 属性更改特定列的可见性。

header: {
 Name: {
 title: "Student Name",//Column Title visible: false 
 },
 }
} 

注释:默认值是 true

禁用对特定列的排序

可以使用 sortable 属性停止特定列的排序。

header: {
 Name: {
 title: "Student Name",//Column Title sortable: false 
 },
 }
}

注释:默认值是 true

添加具有复杂关联的列
header: {
 'Grade': {
 parentClass : 'Academics',//To implement the associated class isComplex: true,//To implement the associated class title: "Grade", 
 }
 }
}
启用对特定列的编辑

可以使用 editable 属性来编辑到特定列的编辑。 可以使用 editType 属性设置编辑的类型。 编辑类型为日期时间编辑,下拉编辑和文本编辑。

启用文本编辑

header: {
 'Grade': {
 parentClass : 'Academics',//To implement the associated class isComplex: true,//To implement the associated class title: "Grade", 
 editable: true,//To make the column editable }
 }
}

启用拖放编辑

为下拉列表提供源的操作方法

 actions:{ 
 dropDownSourceMethod:'Vgrid/GetDropDownValues' }
header: {
 'Grade': {
 parentClass: 'Academics',//To implement the associated class isComplex: true,//To implement the associated class title: "Grade",
 editable: true,
 editType: 'dropDown',
 dropDownId: 'grade',//Grade is the key provided in the dictionary sortable: false },
}

数据源的服务器代码

///<summary>/// Gets the Drop Down data.///</summary>///<returns>Json Datapublic JsonResult GetDropDownValues()
{
 try {
 var grades = getGrades();
 var standard = getStandard();
 var dict = new Dictionary<string,>>();
 dict.Add("grade",grades);
 return Json(new{data = dict});
 }
 catch (Exception)
 {
 throw;
 }
}

日期时间编辑

Dob: {
 editable: true,
 editType: "dateTime",
 dateTimeFormat: "dd M yy",
 width:"100px" }

复选框编辑

IsIndian: {
 editable: true,
 editType:"checkBox",
 width:"100px" }

注释:默认值是 false

将选择模式设置为网格

可以使用 selection 属性来选择网格。 默认情况下,网格将不可选。 它可以使用 selection 属性进行多次选择或者单个选择。

$('#sampleVgrid').VGrid({
 selection: 'single'// or selection: 'multiple'}); 
将标题设置为列

可以使用这里选项来完成列的Title 属性。 maxLenToDisp 为属性,该属性设置要为列设置属性的值 上面。

$('#sampleVgrid').VGrid({
 setTitle: true,//Sets the title to the cells value after the specified length maxLenToDisp:20,//Sets the title for the cells if the length of the character exceed this value });
启用 MultiPageSelection

可以通过使用 multiplePageSelection 属性来完成跨页的选择。

$('#sampleVgrid').VGrid({
 multiplePageSelection:{//Enables the cross page selection uniqueIdentifier: 'Id',
 }, 
}); 
启用ColumnVisibility设置弹出式菜单

可以使用 columnVisibilitySetting 属性在网格中启用列可见性功能。

$('#sampleVgrid').VGrid({
 columnVisibilitySetting:true 
});

单击"信息"栏中的"显示隐藏"按钮,将打开"列可以见性"弹出窗口。

注释:默认值是 false

将颜色设置为表格

定制网格的颜色可以通过为所需属性提供值来完成。 单元格间距设置是设置单元格之间的间距:

$('#sampleVgrid').VGrid({
 tableStyle: {
 oddTrColor: '',
 oddTrTextColor:'',
 evenTrColor: '',
 evenTrTextColor:'',
 headerColor: '',
 headerTextColor: '',
 pagerBarColor:'',
 pagerBarTextColor:'',
 columnVisibilitypopColor:'',
 columnVisibilitypopTextColor:'',
 cellSpacing:"1"//Default value is 1},
});
筛选数据的配置

可以使用 onCallStart 函数来过滤网格中可用的数据。

在脚本中添加 below 代码:

$('#sampleVgrid').VGrid({
 eventHandlers: { onCallStart: function (args) {
 //Data to be posted on ajax request args['name'] = $('#txtName').val();
 return args;
 }}
});//Button click function $('#btnSearch').click(function () {
 gridObject['myNewTable'].load(); 
});//Default load of the grid can be disabled by using the following code$('#sampleVgrid').VGrid({
 defaultLoad:false});

在服务器端,添加 below 代码:

 [HttpPost]public JsonResult GetJsonData(GridParams gridParams){
 //////Server code ///return Json(new { Records=list,TotalRows=totalRows});
}

注释: 参数中提供的变量和方法中的变量应该相同。

回调处理程序的事件处理程序Ajax调用

可以使用这里函数来操作数据。 这里函数将在数据显示在网格中之前触发。

$('#sampleVgrid').VGrid({
 eventHandlers: { 
 callBack: function (data) { 
 //Handler for callback implementations after post///Logic to manipulate the data return data;
 }
 }
});
选择处理程序

这里函数在做出选择后立即触发。 它将对选择验证等有用。

$('#sampleVgrid').VGrid({
 eventHandlers: { 
 selectionHandler: function (data) {
 //Handler for implementation after selection is madereturn data;
 }
 }
});
单元格保存处理程序

这里函数将在可以编辑单元格保存后立即触发。

$('#sampleVgrid').VGrid({
 eventHandlers: { 
 cellSaveHandler: function (currentCellObj, oldValue, newValue) { 
//Do nothing
 return newValue
 }
 } 
});
保存回拨处理程序

这里函数是用于保存的回调处理程序。

$('#sampleVgrid').VGrid({
 eventHandlers: { 
 saveActionCallBack: function (status) {
 if(status=='success') 
 alert("Saved Successfully");
 if(status=='error')
 alert("Error in saving");
 }, 
});
检索选定/更新的记录

Gridobject 检索已经更新的/选定行作为对象,该对象是绑定在。

//Click function to retrieve the selected records$('#btnGetSelectedRows').click(function () {
 var records = gridObject['sampleVgrid'].selectedRecords; 
});//Click function to retrieve the updated records $('#btnGetUpdatedRows').click(function () {
 var records = gridObject['sampleVgrid'].updatedRecords; 
});

注释:默认值为未定义的( 如果未进行任何更改或者未选择行,则返回默认值)。

特定列的文本对齐设置

可以使用 textAlign 设置使文本对齐方式成为 center/Left/Right。

header: {
 Name: {
 title: "Student Name",//Column Title textAlign:'center'//Default value is left },
设置列的显示内容

列HTML内容可以根据使用这里函数的条件更改,这将为每一行作为行数据触发。

 header: {
 'Link': { 
 title: "Link",
 visible: true,
 setDisplayContent: function (record) {
 if (record.Standard == 8)
 return"<a href='http://www.google.com'>google";
 }
 },
}
在生成函数中使用网格保存记录

可以使用actions操作中的save操作method保存更新的记录。 将为保存生成 icon。

在脚本中:

actions: {
 bindingMethod: "/Vgrid/GetData",
 saveMethod: "/Vgrid/Save" },

在服务器端:

publicvoid Save(GridParams gridParams, List<student> updatedRecords, List<student> deletedRecords)
 {
 ///Code  }

注释: save 方法的参数应该是 updatedRecords

启用列调整大小功能

网格列可以使用列调整大小设置调整大小

$('#sampleVgrid').VGrid({
columnResize: true//Default is false});
启用拖放功能

可以在网格中拖动并拖放列的可用列一旦单击要拖动的列就可以拖动,然后移动到网格中所需的索引。

$('#sampleVgrid').VGrid({
 dragDrop: true//Default is false });

注释:默认值是 false。

为网格启用自定义筛选器

使用自定义筛选器可以启用自定义筛选器列字段将列在后键入文本框中,随后再通过添加/删除按钮添加筛选器数据文本 field.Number,然后使用 add/remove按钮removed筛选器。

$('#sampleVgrid').VGrid({
 customFilter: true//Default is false });

自定义 Delete 功能

可以使用 delete functionality.This 删除记录如果启用保存功能,将启用。

$('#sampleVgrid').VGrid({
 eventHandlers: {
 deleteCallBackHandler: function (rowData,rowHtmlObject) {
 //if(!permission){//return []; data will not be deleted//}return rowData;
 }}
 });

网格的示例代码 Fragment
$('#sampleVgrid').VGrid({
header: {
 Name: {
 title: "Student Name",//Column Title visible: true,//Column visibility (default value : true) width: '200px',//To set the width of thee column, textAlign: 'left' },
 Id: {
 title: "Student Id",
 width: '150px',
 textAlign: 'center' },
 Standard: {
 title: "Standard",
 editable: true,
 editType: 'dropDown',
 dropDownId:'standard',
 width: "250px",
 },
 Age: {
 title: "Student Age",
 visible: true,
 width: '250px',
 },
 'Grade': {
 parentClass: 'Academics',//To implement the associated class isComplex: true,//To implement the associated class title: "Grade",
 editable: true,
 editType: 'dropDown',
 dropDownId: 'grade',
 sortable: false,
 width: '250px',
 },
 'FathersName': {
 isComplex: true,
 parentClass: 'Details',
 editable: true,//To make the column editable title: "Father Name",
 width: '250px',
 },
 'MothersName': {
 isComplex: true,
 parentClass: 'Details',
 title: "Mother Name",
 width: '250px',
 },
 IsIndian: { 
 editable: true,//To make the column editable title: "Is Indian",
 width: '250px',
 editType:'checkBox' },
 'FathersOccup': {
 isComplex: true,
 parentClass: 'Details',
 title: "Fathers Occupation",
 visible: true,
 width: '250px',
 },
 'MothersOccup': {
 isComplex: true,
 parentClass: 'Details',
 title: "Mother's Occupation",
 visible: true,
 width: '250px',
 setDisplayContent: function (record) {
 if (record.Standard == 8)
 return"<a href="http://www.google.com">google</a>"; } 
 },
 Dob: {
 visible: true, 
 editable: true,
 editType: "dateTime",
 dateTimeFormat: "dd M yy",
 width:"250px" }
 },
 actions: {
 bindingMethod: "/Vgrid/GetData",
 saveMethod: "/Vgrid/Save",
 dropDownSourceMethod:'Vgrid/GetDropDownValues' },
 pageSize: 25,
 selection: 'multiple',
 eventHandlers: {
 onCallStart: function (args) {
 //Data to be posted on ajax request  args['name'] = $('#txtName').val();
 return args;
 },
 onCallSuccess: function (data) {
 //Handler for callback implementations return data;
 },
 selectionHandler: function (data) { 
 //Handler for implementation after selection is madereturn data;
 }, 
 saveActionCallBack: function (status) {
 alert("Saved Successfully");
 },
 cellSaveHandler: function (currentCellObj, oldValue, newValue) { 
 //Do nothing//return modifiedValue },
 deleteCallBackHandler: function (rowData,rowObject) {
 //if(!permission){//return []; data will not be deleted//}return rowData;
 }
 },
 setTitle: true,//Sets the title to the cells value after the specified length( maxLenToDisp: 20,//Sets the title for the cells if the length of the character exceed this value multiplePageSelection: {//Enables the cross page selection uniqueIdentifier: 'Id',
 },
 tableStyle: {
 oddTrColor: '',
 oddTrTextColor: '',
 evenTrColor: '',
 evenTrTextColor: '',
 headerColor: '',
 headerTextColor: '',
 pagerBarColor: '',
 pagerBarTextColor: '',
 columnVisibilitypopColor: '',
 columnVisibilitypopTextColor: '',
 cellSpacing: "1" },
 columnVisibilitySetting: true,
 defaultLoad: true,
 columnResize: true,
 dragDrop:true,
 customFilter:true,
 gridMessages: {
 error: '',
 noRecordsFound: '',
 updatedChanges: '',
 columnHide: '' }
}); 

结束语

如果你发现任何 Bug,则添加一些功能( gradually.Kindly 添加注释)。 先谢谢了。

历史记录

  • 版本 1: 添加了基本功能的网格
  • 版本 2: 添加了列大小,保存功能,改进样式和版本 1 Bug 修复
  • 版本 2.1: 添加了拖放拖放特性,添加了向下和日期时间编辑功能和CSS主题和版本 2.0 Bug 修复。
  • 版本 2.2: 添加自定义过滤器功能,删除功能和自定义类,在拖动拖放和对齐问题上设置自定义类。
  • 版本 2.3: 在设置内容显示上添加了复选框编辑功能和 Bug 修复,对齐问题。

相关文章