easyui中的edatagrid

标签：des   io   ar   os   java   sp   div   on   cti   

一，下面是JS中的主体 

function initTablList() {
                 $(‘#tbmain‘).edatagrid({
                url: ‘/Team/TeamInfo/GetData/‘,
                saveUrl: ‘/Team/TeamInfo/Save/‘,
                updateUrl: ‘/Team/TeamInfo/Save/‘,
                destroyUrl: ‘/Team/TeamInfo/Save/‘,

             
                width: 530,
                height: 200,
                rownumbers: true,
                fitColumns: true, //列自适应
                idField: ‘id‘, //主键列的列明
                loadMsg: ‘正在加载用户的信息...‘, //展示着行字
                pagination: false, //是否有分页
                singleSelect: true, //是否单行选择
               toolbar:"#toolbar",
              // onLoadSuccess:test,
                // 并在该页面上显示部门、工号、姓名、开始日期、结束日期、培训类别、培训内容、培训机构、费用、培训协议等。
                columns: [
                        [

                            { field: ‘name‘, title: ‘名称‘, align: "center", width: 90, editor: { type: ‘combobox‘,
                            options:{required:true, editable:false,data:  
[  
{‘id‘:‘1‘,‘text‘:‘高速公路‘}, 
{‘id‘:‘2‘,‘text‘:‘一级公路‘},   
{‘id‘:‘3‘,‘text‘:‘二级公路‘},  
{‘id‘:‘4‘,‘text‘:‘三级公路‘}
],
    valueField: ‘id‘, 
 textField: ‘text‘
                            }
                            }
                            },//此为下拉列框
                            { field: ‘age‘, title: ‘年龄‘, align: "center", width: 90, editor: { type: ‘datebox‘, options: { required: true, editable: false}} },//此为时间选择
                            { field: ‘weight‘, title: ‘体重‘, align: "center", width: 90,editor:{type:numberbox,options:{required:true，precision:1}} },//只能输入数字
                            { field: ‘height‘, title: ‘身高‘, align: "center", width: 90,editor:{type:‘validatebox‘,options:{required:true}}},
                             { field: ‘positon‘, title: ‘位置‘, align: "center", width: 90,editor:{type:‘validatebox‘,options:{required:true}} },
                            { field: ‘avgScore‘, title: ‘均场得分‘, align: "center", width: 90,editor:{type:‘validatebox‘,options:{required:true}} },
                            { field: ‘avgTime‘, title: ‘均场时间‘, align: "center", width: 90,editor:{type:‘validatebox‘,options:{required:true}} }
                  
                   

                        ]
                    ]

            });

        } //初始化选择表格

二 下面是Toolbar中的html代码

     <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$(‘#tbmain‘).edatagrid(‘addRow‘)">New</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$(‘#tbmain‘).edatagrid(‘destroyRow‘)">Destroy</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$(‘#tbmain‘).edatagrid(‘saveRow‘)">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$(‘#tbmain‘).edatagrid(‘cancelRow‘)">Cancel</a>
    </div>

easyui中的edatagrid

标签：des   io   ar   os   java   sp   div   on   cti   

原文地址：http://www.cnblogs.com/xjt360/p/4089486.html