easyuI中datagrid控件讲解

使用场景

软件：VisualStudio

视图引擎：Razor编辑器

后台编程语言：C#

引入

<table id="ttt" class="easyui-datagrid"></table>

配置格式

function initGrid() {
    $("#ttt").datagrid({

    //配置各种参数
    method:'POST',
    singleSelect:false,
    ......
   
    });
}

基本参数

datagrid基本参数

属性名称	讲解	备注
title	列表标题	不定义该参数则无标题
striped	是否交替行换色	true/false
rownumbers	是否显示行号	true/false
nowrap	表格中的内容是否不换行	true/false,默认true
fit	宽高自适应	true/false
height	列表整体高度
fitColumns	底层滚动条。是否要求自适应	true/false,默认列少时false，列多时true
singleSelect	是否只能选中一行	true/false,若是true无法全选
selectOnCheck	选中复选框时对应行是否跟着选中或取消选中	true/false
checkOnSelect	点击行时复选框是否会跟着被选中或取消选中	true/false
showFooter	是否显示统计行，即“总计：X项...”字样	true/false
pagination	是否显示底部分页	true/false,若要分页选true
pageList	在设置分页属性的时候 初始化页面大小选择列表	[10,15,n3,...]
pageSize	在设置分页属性的时候初始化页面大小
url	对应的后台地址，对应控制器的动作方法	默认是当前视图对应的控制器中的方法
queryParams	要传递到后台的参数
onLoadSuccess	后台方法调用成功后	onLoadSuccess: function(data){}
columns	列表中的列，各列的标题、数据和样式
frozenColumns	固定列，固定在最左边，其他同columns
onClickRow	鼠标单击方法	后面跟单击时要调用的方法
onDblClickRow	鼠标双击方法	方面跟鼠标双击时要调用的方法

传递的参数

传到后台的参数

在调用url参数对应的后台方法时，传递到后台的参数主要有两部分。

1.系统会自动传递两个参数

page:代表当前页码

rows:代表总页数

2.queryParams中的参数

格式如下所示

queryParams: {
参数名称1: 取值1,
参数名称2: '@X',
......
参数名称n: $("#Y").val()               
}

从后台传回的参数

后台传回前台一个json字符串，可参照以下格式封装

public string XXXXXXX()
{
    Dictionary<string, object> dict = new Dictionary<string, object>();
    string jsonReturn = "";

    //接收传递到后台的数据
    string page = System.Web.HttpContext.Current.Request.Form["page"];
    string rows = System.Web.HttpContext.Current.Request.Form["rows"];
    ......

    ......
    //定义一个Dictionary类型的参数并添加相关数据
    dict.Add("rows",X);
    .....
    dict.Add("returnMsg",Y);
    //将数据转化为json格式并返回
    jsonReturn=Newtonsoft.Json.JsonConvert.SerializeObject(dic);
    return jsonReturn;
}

通常传递的参数如下：

total:数据总量

rows:展示的数据

Columns样式

整体格式

......,
columns:[[
{
field:'projectname',
title:'项目名称',
align:'center',
.....
},
{
......
},
.....
]],
......

columns参数

属性名称	对应的内容	说明
field	对应数据的字段名称
title	当前列的名称	首行标题
align	文字水平格式	偏左偏右或居中
halign	文字垂直格式	偏上垂直居中或偏下
width	格子宽度	XXpx
hidden	是否隐藏	true/false
styler	自定义样式	可采用function(value,row,index){}形式
formatter	自定义内容	填对应的方法名 可采用function(value,row,index){}形式

formatter方法

示例一：

function ZDYDM(value,row,index)
{
    var str="<input type=\"text\" value=\"0\"  onchange=\"ff(this)\"></input>"; 
    return str;
}

示例二：

function ZLCNum(value, row, index) {
    //row.A 的格式可以获取当前行数据对象的A属性的值
    var str = "<a href=\"#\" onclick=\zdyff(" + row.ID + ") >" + row.YJZRK + "</a>";
    return str;
}

添加修改数据功能

更新中

添加新增删除数据功能

更新中