<select></select> <div> <div>Select a language</div> <input type="radio" value="01"><span>Java</span><br/> <input type="radio" value="02"><span>C#</span><br/> <input type="radio" value="03"><span>Ruby</span><br/> <input type="radio" value="04"><span>Basic</span><br/> <input type="radio" value="05"><span>Fortran</span> </div> <script type="text/javascript"> $(function(){ $('#cc').combo({ required:true, editable:false }); $('#sp').appendTo($('#cc').combo('panel')); $('#sp input').click(function(){ var v = $(this).val(); var s = $(this).next('span').text(); $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel'); }); }); </script>
界面代码如下所示：
复制代码 代码如下:
<input type="checkbox" >帐号过期
由于复选框的一些特殊性质，在表单提交的时候，如果没有勾选的选型，使用serializeArray()方法构造的数据，复选框的值则不会被提交。
基于这个原因，我们可以使用Select控件进行替代，实现复选项的功能，而不影响
复制代码 代码如下:
var postData = $("#ffEdit").serializeArray();
以上代码的使用。
使用Select控件的代码如下所示。
<select> <option value="true" selected>正常</option> <option value="false">不可见</option> </select>
赋值给界面控件代码如下：
复制代码 代码如下:
$("#Visible1").prop('checked', info.Visible);
获取界面控件的值代码如下：
复制代码 代码如下:
var visible = $("#txtVisible").val();
9、表格控件DataGrid
easyui的列表控件，可以通过指定table的class属性为easyui-datagrid即可实现表格的定义，界面代码如下所示：
<table title="Basic DataGrid" data-options="singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json'"> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100">Product</th> <th data-options="field:'listprice',width:80,align:'right'">List Price</th> <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',width:250">Attribute</th> <th data-options="field:'status',width:60,align:'center'">Status</th> </tr> </thead> </table>
不过为了避免使用脚本定义datagrid导致多次初始化的问题，我们一般只需要指定一个table代码即可，界面如下所示
<table title="用户操作" iconcls="icon-view"> </table>
而表格控件的数据加载，我们使用javascript进行初始化，初始化后的表格界面显示效果如下所示。
Javascript代码如下所示，其中的width: function () { return document.body.clientWidth * 0.9 }是用来实现宽度自适应的一个操作。
//实现对DataGird控件的绑定操作 function InitGrid(queryData) { $('#grid').datagrid({ //定位到Table标签，Table标签的ID是grid url: '/Menu/FindWithPager', //指向后台的Action来获取当前菜单的信息的Json格式的数据 title: '功能菜单', iconCls: 'icon-view', height: 650, width: function () { return document.body.clientWidth * 0.9 }, nowrap: true, autoRowHeight: false, striped: true, collapsible: true, pagination: true, pageSize: 100, pageList: [50,100,200], rownumbers: true, //sortName: 'ID', //根据某个字段给easyUI排序 sortOrder: 'asc', remoteSort: false, idField: 'ID', queryParams: queryData, //异步查询的参数 columns: [[ { field: 'ck', checkbox: true }, //选择 { title: '显示名称', field: 'Name', width: 200}, { title: '图标', field: 'Icon', width: 150 }, { title: '排序', field: 'Seq', width: 80 }, { title: '功能ID', field: 'FunctionId', width: 80 }, { title: '菜单可见', field: 'Visible', width: 80 }, { title: 'Winform窗体类型', field: 'WinformType', width: 400 }, { title: 'Web界面Url地址', field: 'Url', width: 200 }, { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 }, { title: '系统编号', field: 'SystemType_ID', width: 80 } ]], toolbar: [{ id: 'btnAdd', text: '添加', iconCls: 'icon-add', handler: function () { ShowAddDialog();//实现添加记录的页面 } }, '-', { id: 'btnEdit', text: '修改', iconCls: 'icon-edit', handler: function () { ShowEditOrViewDialog();//实现修改记录的方法 } }, '-', { id: 'btnDelete', text: '删除', iconCls: 'icon-remove', handler: function () { Delete();//实现直接删除数据的方法 } }, '-', { id: 'btnView', text: '查看', iconCls: 'icon-table', handler: function () { ShowEditOrViewDialog("view");//实现查看记录详细信息的方法 } }, '-', { id: 'btnReload', text: '刷新', iconCls: 'icon-reload', handler: function () { //实现刷新栏目中的数据 $("#grid").datagrid("reload"); } }], onDblClickRow: function (rowIndex, rowData) { $('#grid').datagrid('uncheckAll'); $('#grid').datagrid('checkRow', rowIndex); ShowEditOrViewDialog(); } }) };
对于查询按钮触发的数据后台查询及数据绑定操作，javascript代码如下所示：