# aardio 范例: 列表视图（listview）控件 - 可编辑列表视图



```aardio
//列表视图（listview）控件 - 可编辑列表视图 
import win.ui;
/*DSG{{*/
var winform = win.form(text="可编辑列表视图 - 双击编辑单元格(可指定只读列)";right=1031;bottom=712)
winform.add(
edit={cls="edit";left=25;top=584;right=997;bottom=693;edge=1;multiline=1;z=2};
listview={cls="listview";left=24;top=27;right=996;bottom=555;edge=1;z=1}
)
/*}}*/

import win.ui.grid;
var grid = win.ui.grid(winform.listview);//创建可编辑的 listview 控件，鼠标左键双击可以编辑任意项文本
grid.setReadonlyColumns(1);//可选设置禁止编辑的列，设为 -1 禁止编辑所有列

//添加标题列，可选自定义显示列名
winform.listview.columns = [
	["ID",100/*列宽*/],
	["日期",100],
	["标题",-1/*自适应宽度*/],
]

import sqlite;
var db = sqlite("/testParameters.db");
db.exec( "CREATE TABLE IF NOT EXISTS @tablename(id INTEGER PRIMARY KEY, date, title);",{
    tablename = "myTableName"
} ) 

var cmd = db.prepare("INSERT INTO myTableName VALUES (NULL,@date,@title);" );
for(i=1;10;1){
	cmd.step(
    	date = time().addDays( math.random(1,30));
    	title = string.random(15);
 	)
}

//直接支持常用数据库的 getTable 函数返回的数据格式
var dataTable = db.getTable("SELECT * FROM [myTableName] ");

//直接让 listview 控件显示数据库的查询结果
grid.setTable( dataTable )

//编辑变更值会触发下面的事件
grid.onEditChanged = function(text,iItem,iSubItem){
	var name = dataTable.fields[iSubItem]
	winform.edit.print(dataTable[iItem][name],"-->",text);
	dataTable[iItem][name] = text;
} 

/*
用户点击列头排序时会触发下面的事件，
column 为列号，desc 参数指定是否倒序
*/
grid.onSortColumn = function(column,desc){
	var name = dataTable.fields[column];
	table.sort(dataTable,desc ? (lambda(next) owner[name] > next[name]) : (lambda(next) owner[name] < next[name]));	
	 
	grid.setTable( dataTable );
	return true; //返回 true 允许当前列排序
}

winform.show() 
win.loopMessage();

```