基于MV+EasyUI的Web开发框架形成之旅(2)

单项选择Radio控件，是在多项内容里面选择一个选项进行保存或者显示。

界面代码如下所示：

数据分开方式：分隔符方式，多个数据中英文逗号，分号，斜杠或顿号[, ， ; ； / 、]分开，或一行一个 一行一个记录模式，忽略所有分隔符号

赋值给界面控件代码如下：

$('input:radio[name="SplitType"][value="Split"]').prop('checked', true);

获取界面控件的值代码如下：

$("input[name='SplitType']:checked").val()

或者使用Comobo控件作为单项选择的控件也是可以的，界面效果如下所示。

其界面代码如下所示：

Select a languageJavaC#RubyBasicFortran $(function(){ $().combo({ required:true, editable:false }); $()); $((){ ).val(); ).text(); $(); }); });

8、复选框

复选框是在一项或多项内容中，选择零项或者多项的一个输入界面控件。

界面代码如下所示：

帐号过期

由于复选框的一些特殊性质，在表单提交的时候，如果没有勾选的选型，使用serializeArray()方法构造的数据，复选框的值则不会被提交。

基于这个原因，我们可以使用Select控件进行替代，实现复选项的功能，而不影响

var postData = $("#ffEdit").serializeArray();

以上代码的使用。

使用Select控件的代码如下所示。

正常不可见

赋值给界面控件代码如下：

$("#Visible1").prop('checked', info.Visible);

获取界面控件的值代码如下：

var visible = $("#txtVisible").val();

9、表格控件DataGrid

easyui的列表控件，可以通过指定table的class属性为easyui-datagrid即可实现表格的定义，界面代码如下所示：

data-optionsItem IDProductList PriceUnit CostAttributeStatus

不过为了避免使用脚本定义datagrid导致多次初始化的问题，我们一般只需要指定一个table代码即可，界面如下所示

而表格控件的数据加载，我们使用javascript进行初始化，初始化后的表格界面显示效果如下所示，。

Javascript代码如下所示，其中的width: function () { return document.body.clientWidth * 0.9 }是用来实现宽度自适应的一个操作。

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代码如下所示：

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shenmilingyu/article-6757-2.html