LJS使用指南--DataGrid控件

LJS控件库

LJS的DataGrid控件功能类似ASP.NET中的DataGrid控件，不同的是，LJS的DataGrid是在客户端运行的

 

1.定义数据源

DataGrid在客户端需要用一个Javascript对象作为数据源，一个Javascript对象如果作为LDataGrid的数据源，必须提供以下方法：

GetRow(index) //返回第index行
GetRowCount() //返回总行数

例如，以下代码定义了一个可以作为DataGrid数据源的类型：

function MyDataSource()
{
    //保存所有的行
    this.Rows=[]
    //返回第index行
    this.GetRow=function(index)
    {
        return this.Rows[index]
    }
    //返回总行数
    this.GetRowCount=function()
    {
        return this.Rows.length
    }
}

2.编写DataGrid配置文件

DataGrid配置文件实际是一个XML文件，用于描述该表格包含什么列，列的名称，样式，显示的内容等，例如，以下配置文件定义了一个可以用来对上面定义的MyDataSource进行增，删，改的DataGrid。配置文件具体说明请看注释：

<?xml version="1.0" encoding="utf-8" ?>
<!--
DataGrid属性说明：

ClassCss:生成的表格<table>的样式
CellCss:单元(<td>)格默认样式
HeaderRowCss:表头行(<tr>)的样式
FooterRowCss:脚注行(<tr>)的样式
RowCss:行(<tr>)的样式
EditRowCss:编辑行(<tr>)的样式
PageBarCss:页码条的样式

DataSource:DataGrid的数据源，数据源为一个Javascript对象，
           该对象需提供GetRow(index)和GetRowCount()方法

Container:包含生成的表格的DIV

ShowFooter:是否显示脚注
ShowHeader:是否显示表头

PageSize:每页显示的行数
AutoPaging:是否分页
MaxPageNumberCount:页码条最多显示的页码个数

AutoAppendBlankRow:当最后一页的行数不足一页时，是否用空行补足

其他属性将直接作为生成的<table>标志的属性
-->
<!--
DataGrid方法说明：
DisplayTable() 显示表格(只显示当前页)
SetCurrentPageIndex(pageIndex) 将第pageIndex页设置为当前页并显示
EditRow(rowIndex) 使第rowIndex行进入编辑状态
GetPageCount() 获取表格的页数
-->
<LDataGrid 
    ClassCss="tab_css"
    CellCss="td_css" 
    HeaderRowCss="tr_header_css" 
    FooterRowCss="tr_footer_css"
    RowCss="tr_css" 
    EditRowCss="tr_edit_css"
    PageBarCss="page" 
    DataSource="ds"
    Container="Container"
    ShowFooter="true"
    ShowHeader="true"
    ShowPageBar="true" 
    PageSize="5"
    AutoPaging="true" 
    AutoAppendBlankRow="true"
    MaxPageNumberCount="7"
    CellSpacing="0"
>
    <Columns>        
        <!--
        TemplateColumn 属性说明:
        HeaderText:列的名称
        -->
        <TemplateColumn HeaderText="姓名">
            <!--
            ItemTemplate,FooterTemplate 属性说明:
            ClassCss:单元格样式,如果该属性为空，用使用默认样式(即LDataGrid的CellCss属性)
            -->
            <!--
            EditTemplate 属性说明:
            ClassCss:单元格样式,如果该属性为空，用ItemTemplate的样式,
                     如果ItemTemplate的样式也为空，使用默认样式(即LDataGrid的CellCss属性)
            -->
            <!--
            ItemTemplate,FooterTemplate,EditTemplate 内嵌Javascript代码说明:
                     
            使用 {{ Javascript语句 }} 的方式嵌入代码(只能嵌入一行),
            嵌入代码用eval()函数动态编译,内嵌Javascript语句可以引用以下变量:
                     
            Grid      当前的DataGrid
                     
            ItemIndex 当前正在生成的行的序号
                     
            Item      当前正在生成的行(Item=Grid.DataSource.GetRow(ItemIndex))，
                      如何使用Item取决于DataSource的定义
            -->
            <ItemTemplate>
                <span>{{ Item.Name }}</span>
            </ItemTemplate>
            <FooterTemplate>
                <input type="text" id="txtInsertName"/>
            </FooterTemplate>
        </TemplateColumn>
        
        <TemplateColumn HeaderText="电话">
            <ItemTemplate>
                <span style="color:Red;">{{ Item.Tel }}</span>
            </ItemTemplate>
            <EditTemplate>
                <input type="text" id="txtUpdateTel"  value="{{ Item.Tel }}"/>
            </EditTemplate>
            <FooterTemplate>
                <input type="text" id="txtInsertTel"/>
            </FooterTemplate>
        </TemplateColumn>

        <TemplateColumn HeaderText="E-Mail">
            <ItemTemplate ClassCss="td_email_css">
                <span>{{ Item.Mail }}</span>
            </ItemTemplate>
            <EditTemplate>
                <input type="text" id="txtUpdateMail"  value="{{ Item.Mail }}"/>
            </EditTemplate>
            <FooterTemplate>
                <input type="text" id="txtInsertMail"/>
            </FooterTemplate>
        </TemplateColumn>
        
        <TemplateColumn HeaderText="操作">
            <ItemTemplate>
                <input type="button" onclick="Grid.EditRow({{ ItemIndex }})" value="编辑"/>
                <input type="button" onclick="return Delete({{ ItemIndex }})" value="刪除"/>
            </ItemTemplate>
            <EditTemplate>
                <input type="button" onclick="return Update({{ ItemIndex }})" value="确定"/>
                <input type="button" onclick="Grid.EditRow(-1)" value="取消"/>
            </EditTemplate>
            <FooterTemplate>
                <input type="button" onclick="return Insert()" value="添加"/>
            </FooterTemplate>
        </TemplateColumn>
    </Columns>
</LDataGrid>

3.在配置文件中嵌入Javascript代码

DataGrid支持在配置文件中嵌入Javascript代码，嵌入方式如下：

{{ Javascript语句 }}

嵌入代码将使用eval()函数动态编译,内嵌Javascript语句可以引用以下变量:
Grid              当前的DataGrid
ItemIndex     当前正在生成的行的序号
Item             当前正在生成的行

Item=Grid.DataSource.GetRow(ItemIndex) 
如何使用Item取决于DataSource的定义

4.在页面中创建DataGrid对象

(1)添加一个div作为包含DataGrid的容器

<div id="Container">
</div>

注意:该div的id必须与配置文件中的Container属性的值相同

(2)创建DataGrid

//使用配置文件创建DataGrid，xmlUrl为配置文件的Url
var grid=LJS.create("LJS.UI.DataGrid","DataGrid.xml")
//显示LDataGrid
grid.DisplayTable()