在datagrid中的toolbar添加输入框

来源：互联网发布：天猫淘宝京东的区别ppt 编辑：程序博客网时间：2024/06/05 00:03

如何在jQuery easyui datagrid中添加输入框，只需要在toolbar中添加<input>如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../jquery-1.4.4.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><script>$(function(){$('#test').datagrid({title:'TestDataGrid',//列表名iconCls:'icon-save',width:600,height:350,nowrap: false,striped: true,collapsible:true,url:'datagrid_data.json', //所连的Action名sortName: 'code',sortOrder: 'desc',remoteSort: false,idField:'code',frozenColumns:[[                {field:'ck',checkbox:true},                {title:'序列',field:'code',width:80,sortable:true}]],columns:[[        {title:'内容',colspan:3},{field:'opt',title:'操作',width:100,align:'center', rowspan:2,formatter:function(value,rec){return '<span style="color:red">编辑 删除e</span>';}}],[{field:'writer',title:'姓名',width:120},{field:'addr',title:'住址',width:120,rowspan:2,sortable:true,sorter:function(a,b){return (a>b?1:-1);}},{field:'content',title:'说说',width:150,rowspan:2}]],pagination:true,rownumbers:true,toolbar:[{            text: '输入框1<input type="text" id="userAccount"/>输入框2<input type="text" id="identityNum"/>'        }, {            text: '输入框3<input type="text" id="username"/>'        }, {            id: 'btnAddPeopleSetId',            text: '这是toolbar输入框',            iconCls: 'icon-add',            handler: function(){                inputToobar();            }        }]});var p = $('#test').datagrid('getPager');if (p){$(p).pagination({onBeforeRefresh:function(){alert('before refresh');}});}});</script></head><body><h1>DataGrid</h1><table id="test"></table></body></html>

阅读全文

0 0