java web的datagrid详解
的有关信息介绍如下:datagrid,其实也就是一个表单,但是它不仅仅是一个可以显示数据的form表单,他还是一个可以从后台controller接收数据,来展现在前端网页上的表单,今天,就让我从datagrid入手,教会大家如何上手datagrid,配置好前端页面吧。
首先,我们先来介绍以下什么是datagrid,俗话说得好,百闻不如一见,我们就来先看一下datagrid是长什么样子的:
下面一起附上的还有我们datagrid的代码:
然后我们来大致介绍一下其中的常用参数吧:
striped 设置成true,奇偶行的颜色就会不一样,设置为false反之
pagination:这个设置为true,就可以显示分页工具栏
singleSelect:单项选择,一次只允许选中一行
sortable也是顾名思义,列是可以被排序的
下面让我们来看一下具体列的参数吧:
field: 'staffId',:这个是指这一列的隐含名称叫做staffid,也就是如果后台往前台传数据的时候,数据名为staffid的值会显示在这个表单中,这个功能就是表单连接后台的最有用的功能
title: '用户名称',:就是列名称,如下图所示,列名称为:用户名称。
width: 250,这一列的宽度,没什么可说的
align: 'center',相信学过html的都知道这个是文字布局方式,也就是这个文字是摆在这个列的左边右边还是中间的规定
hidden: true:true的话就是这一列作为隐藏,至于为什么要隐藏,这里不做详细说明,一般的作用都是用来保存后台的数据但是不想给用户看到的。
说了那么多,下面就让我们来实战联系一下这个datagrid应该怎么操作吧!
我们先以这个页面为例:
我们注意到这些列里面的名称都是长短不一的,所以我们应该把这一列的所有文字都放在最左边。
我们在这里看到代码,也就是用户名称和工号还有组织这三列需要我们进行操作。
我们如上面描述的所说,吧这些的align:center改为left应该就可以了,下面我们来看一下我们的成果
可以看见,我们的确成功的把这一段文字放到最左边了,当然这只是一个小小的例子,但是easyui正如它的名称一样,真的很简单,只要去理解了其中的机制,操作起来您就会得心应手。