EasyUi combotree 實現(xiàn)動態(tài)加載樹節(jié)點

字號:


    jquery easyui中的combogrid比較特殊,算是combo和grid的組合,combogrid結(jié)合一個可編輯的文本框和下拉數(shù)據(jù)網(wǎng)格面板,可以讓用戶迅速找到并選擇,又可以進行搜索,展示與當前輸入的字符相匹配的數(shù)據(jù)。如果數(shù)據(jù)量大的情況,就需要combogrid具有分頁的功能。下面給大家介紹EasyUi中的Combogrid 實現(xiàn)分頁和動態(tài)搜索遠程數(shù)據(jù)。
    $('#mallid').combogrid({
    panelWidth:500,
    idField:'mallid', //ID字段
    textField:'mallname', //顯示的字段
    url:"../global/datagrid.aspx?act=malllist",
    fitColumns: true,
    striped: true,
    editable:true,
    pagination : true,//是否分頁
    rownumbers:true,//序號
    collapsible:false,//是否可折疊的
    fit: true,//自動大小
    pageSize: 10,//每頁顯示的記錄條數(shù),默認為10
    pageList: [10],//可以設置每頁記錄條數(shù)的列表
    method:'post',
    columns:[[
    {field:'mallname',title:'商城名稱',width:150,sortable:true},
    {field:'url',title:'網(wǎng)址',width:150}
    ]],
    keyHandler: {
    up: function() {},
    down: function() {},
    enter: function() {},
    query: function(q) {
    //動態(tài)搜索
    $('#mallid').combogrid("grid").datagrid("reload", { 'keyword': q });
    $('#mallid').combogrid("setValue", q);
    }
    }
    });
    最近做一個項目時用到了jquery easyui,但是官方提供的demo太簡單了,有好多功能都沒有相關(guān)的例子。網(wǎng)上的資料很少,只能自己寫demo了。在這里簡單記錄一下。
    1.easyUi combotree 實現(xiàn)動態(tài)加載樹節(jié)點
    2.easyUi combogrid 實現(xiàn)分頁和動態(tài)搜索遠程數(shù)據(jù)
    下面給大家補充點知識:
    一、ComboGrid常用屬性參數(shù)配置
    loadMsg:加載遠程數(shù)據(jù),顯示的信息
    idField:select中選擇提交值
    textField:select中選擇的顯示值
    mode:定義如何加載DataGrid的數(shù)據(jù)文本的方式。當設置為“'remote'”模式下,什么類型的用戶將被發(fā)送http請求參數(shù)名為'q'的服務器,以獲取新的數(shù)據(jù)
    filter:當數(shù)據(jù)加載時”mode”設置為”local”,如何選擇本地數(shù)據(jù)源,返回true選擇行
    二、ComboGrid常用方法
    options():返回選擇對象
    grid():返回選擇dataGrid對象
    setValues(values):設置元素值數(shù)組
    setValue(value):設置組件的值
    clear():清除組件的值